如何将Material UI的LinearProgress组件正确旋转90度？

你当前的写法存在两个核心问题：

1. transform属性被写在了样式对象的根层级，不属于root类的规则范围，MUI的LinearProgress组件没有对应的类名插槽匹配这个规则，所以样式完全不会生效
2. 即便正确写入root类，90度旋转后还会因为旋转基点、默认宽高的问题出现组件偏移、显示不全的情况，需要做配套参数调整

首先调整自定义样式规则，将transform相关属性放到root类中，同时补充宽高、旋转基点配置：

const BorderLinearProgressBottom = withStyles((theme) => ({
  root: {
    // 这里的宽度对应旋转后进度条的高度，可按需调整
    width: 50,
    // 这里的高度对应旋转后进度条的总长度，可按需调整
    height: 300,
    borderRadius: 5,
    transform: "rotate(90deg)",
    // 调整旋转基点避免组件旋转后跑出可视区域，可根据布局需求修改
    transformOrigin: "left bottom",
  },
  colorPrimary: {
    backgroundColor:
      theme.palette.grey[theme.palette.type === "light" ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: "#00A99E",
  },
}))(LinearProgress);

组件调用方式无需修改：

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

• 如果旋转后位置不符合预期，可以修改transformOrigin的属性值，可选值包括center center、top left等，也可以在transform属性后追加位移规则，例如transform: "rotate(90deg) translate(0, 100%)"手动修正位置
• 如果你使用的是MUI v5及以上版本，更推荐使用官方推荐的styledAPI替代已废弃的withStylesAPI，样式规则写法和上述逻辑一致

内容的提问来源于stack exchange，提问作者snack overflow