旋转 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 仍然占据 space，就好像它是水平放置的一样。要旋转其外观和大小，您应该查看 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 有效，因为它只转换 'locally' （条形图位置在容器内是绝对的）。

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

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

旋转 MUI LinearProgress

Rotate a MUI LinearProgress

javascript

css

rotation

reactjs

material-ui

现场演示