MUI React中TableRow悬浮时CircularProgressBar隐藏及颜色不切换问题

问题分析 #

你遇到两个核心问题：

• TableRow悬浮时，CircularProgress的颜色无法从橙色切换为深蓝色
• 悬浮时ProgressBar消失，仅保留百分比数字

这两个问题主要源于样式优先级不足和错误的hover状态样式覆盖。

解决方案 #

1. 修复颜色切换问题 #

在Material UI v5中，直接通过全局类名修改样式会被组件内联样式覆盖，需要使用组件的sx属性进行嵌套样式定位，确保hover状态下的样式优先级足够：

<TableRow
  sx={{
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.04)', // 可选，保留TableRow默认hover背景
    },
    // 定位悬浮状态下的CircularProgress组件
    '&:hover .ProgressCircular': {
      '& .MuiCircularProgress-circle': {
        stroke: '#003366', // 替换为目标深蓝色
      },
      '& .MuiCircularProgress-circleStatic': {
        stroke: 'rgba(0,51,102,0.2)', // 深蓝色浅色版，匹配背景环
      }
    }
  }}
>

同时确保CircularProgress组件正确添加ProgressCircular类名，并设置初始橙色样式：

<CircularProgress
  className="ProgressCircular"
  variant="determinate"
  value={progress}
  sx={{
    // 初始橙色样式
    '& .MuiCircularProgress-circle': {
      stroke: '#ff9800',
    },
    '& .MuiCircularProgress-circleStatic': {
      stroke: 'rgba(255,152,0,0.2)',
    }
  }}
/>

2. 修复悬浮时ProgressBar消失问题 #

检查代码中是否在TableRow的hover状态下给ProgressCircular类添加了display: none或visibility: hidden规则，若有直接删除。如果是父元素的overflow/opacity设置导致隐藏，需确保ProgressCircular在hover时保持可见：

// 移除类似这样的错误样式
// '&:hover .ProgressCircular': { display: 'none' }

核心修改要点 #

• 用sx属性的嵌套选择器，保证hover样式能精准覆盖CircularProgress的默认样式
• 分别设置动态进度环（circle）和静态背景环（circleStatic）的颜色，保持视觉一致性
• 清除所有会在hover状态下隐藏ProgressBar的样式规则

内容的提问来源于stack exchange，提问作者m.mohammadi