旋转 MUI LinearProgress

Question

我正在尝试使用带有一些样式的 LinearProgress 组件制作带有 MUI 的图表，基本想法是让它旋转 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" }], 但没有成功。

Code Sandbox

Answer 1

如果你想垂直显示LinearProgress，请不要使用rotate(-90deg)，它会破坏你的布局，因为transform只是在视觉上缩放元素而不改变大小，所以旋转的LinearProgress仍然占据空间，好像它是水平布局的。要旋转它的外观和大小，您应该查看Slider 的实现以供参考。不过为了节省时间，我现在就给你写下来。

首先你需要交换ProgressBar容器的height和width：

// 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。

现场演示