如何反转MUI环形进度条旋转方向？尝试rotate(180deg)无效

线性进度条（LinearProgress） #

直接给根组件加transform: rotate(180deg)无效，通常是因为样式没作用到实际的进度填充元素，推荐两种方案：

1. 使用RTL方向快速实现
   最简单的方式是给组件设置direction: 'rtl'，让进度从右往左填充：

   <LinearProgress sx={{ direction: 'rtl' }} value={50} />
   

2. 精准定位进度条元素翻转
   如果需要保留轨道的原始方向，只翻转进度填充部分，通过类名定位内部的MuiLinearProgress-bar元素：

   <LinearProgress className="reverse-linear-progress" value={50} />
   

   对应的CSS：

   .reverse-linear-progress .MuiLinearProgress-bar {
     transform: scaleX(-1);
   }
   

圆形进度条（CircularProgress） #

如果是圆形进度条，默认顺时针填充，翻转方向时需注意组件的variant模式：

1. Determinate模式下直接翻转
   当使用variant="determinate"时，直接给组件添加翻转样式即可生效：

   <CircularProgress 
     sx={{ transform: 'rotate(180deg)' }} 
     value={75} 
     variant="determinate" 
   />
   

2. Indeterminate模式下调整动画
   不确定模式的动画是预设的，直接旋转可能效果异常，可通过覆盖内部动画实现：

   .reverse-circular-progress .MuiCircularProgress-circleIndeterminate {
     animation: circular-progress-reverse 1.4s linear infinite;
   }
   
   @keyframes circular-progress-reverse {
     0% {
       stroke-dashoffset: 100%;
       transform: rotate(0deg);
     }
     100% {
       stroke-dashoffset: 0;
       transform: rotate(-360deg);
     }
   }
   

   使用时给组件添加类名：

   <CircularProgress className="reverse-circular-progress" />
   

常见无效原因排查 #

• 样式未作用到正确DOM元素：MUI组件有多层嵌套，需通过浏览器开发者工具定位实际的进度填充元素（如MuiLinearProgress-bar、MuiCircularProgress-circle）。
• 父容器overflow: hidden：旋转后组件可能被父容器裁剪，需检查父元素的overflow属性。
• 样式优先级被覆盖：可尝试调整样式的优先级顺序，优先用MUI的sx或类名权重提升，非必要不使用!important。

内容的提问来源于stack exchange，提问作者Hansel Carter