旋转 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" }],

但这没有用。

代码沙盒

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 示例