旋转材质 UI LinearProgress

Question

我正在尝试使用具有某种样式的

LinearProgress

组件使用 Material UI 制作图表，其基本思想是使其旋转

90deg

const BorderLinearProgressBottom = withStyles((theme) => ({
  root: {
    height: 50,
    borderRadius: 5,
  },
  colorPrimary: {
    backgroundColor:
      theme.palette.grey[theme.palette.type === "light" ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: "#00A99E",
  },
  transform: [{ rotate: "90deg" }],
}))(LinearProgress);

得到我的

 <BorderLinearProgressBottom
     variant="determinate"
     value={22}
     />

看起来像这样

如何让它旋转

90deg

？

我尝试放入

BorderLinearProgressBottom

transform: [{ rotate: "90deg" }],

但没用。

代码沙箱

Answer 1

如果您想垂直显示

rotate(-90deg)

，请不要使用

LinearProgress

，它会破坏您的布局，因为

transform

仅在视觉上缩放元素而不改变大小，因此旋转的

LinearProgress

仍然占据空间如果它是水平放置的。要旋转其外观和大小，您应该查看

Slider

的实现以供参考。但我现在就写下来给你，以节省时间。

首先，您需要交换

height

容器的

width

和

ProgressBar

：

// before
height: 50, // restrict the height
width: 'auto', // expand as long as you want (inside container)

// after
width: 50, // restrict the width
height: '100%', // expand as high as you want (inside container)

然后旋转里面的进度条。这个

transform

之所以有效，是因为它只进行“本地”变换（条形位置在容器内是绝对的）。

bar: {
  // the default style uses translateX, so we need to switch the axis
  transform: ({ value }) => {
    return `translateY(${value}%) !important`;
  }
}

就是这样。你完成了。不是它看起来像垂直的

Slider

。

现场演示

Answer 2

以下是在material-ui v5 中相同的工作原理。首先创建一个样式组件：

const VerticalLinearProgress = styled(LinearProgress)(() => ({
  width: "16px",
  height: "100%",
  [`& .${linearProgressClasses.bar}`]: {
    backgroundColor: "#F5F6FA"
  },
  [`&.${linearProgressClasses.colorSecondary}`]: {
    backgroundColor: "#eb82bf"
  }
}));

然后您需要将进度应用为

value

和

sx

变换，如下所示：

const progress = 40

<VerticalLinearProgress
   variant="determinate"
   color="secondary"
   value={progress}
   sx={{
     [`& .${linearProgressClasses.bar}`]: {
       transform: `translateY(${-progress}%)!important`
     }
   }}
 />

Codesandbox 示例