MUI中styleOverrides修改CardActionArea hover背景色显示异常排查

问题根源 #

MUI的CardActionArea基于ButtonBase实现，而ButtonBase默认给hover状态设置了opacity: 0.8的样式。你设置的indigo[50]（#e8eaf6）会被这个透明度淡化，导致实际取色结果变成#e0e2ed，这就是颜色不符的核心原因。

虽然浏览器计算样式里显示的背景色是正确的#e8eaf6，但opacity会对整个元素的视觉效果产生叠加影响，取色工具检测到的是经过透明度混合后的最终颜色。

解决方案 #

有两种方式可以修复这个问题：

方案1：全局覆盖ButtonBase的hover透明度 #

在主题配置中给MuiButtonBase的hover状态强制设置opacity: 1，移除默认的透明度效果：

theme = createTheme(theme, {
  components: {
    MuiButtonBase: {
      styleOverrides: {
        root: {
          "&:hover": {
            backgroundColor: indigo[50],
            opacity: 1 // 强制移除默认透明度
          }
        }
      }
    }
  }
});

方案2：仅针对CardActionArea修改（更推荐） #

如果不想影响其他基于ButtonBase的组件，可以直接针对MuiCardActionArea进行样式覆盖，更精准：

theme = createTheme(theme, {
  components: {
    MuiCardActionArea: {
      styleOverrides: {
        root: {
          "&:hover": {
            backgroundColor: indigo[50],
            opacity: 1
          }
        }
      }
    }
  }
});

验证 #

修改后hover时的背景色会完全显示为indigo[50]（#e8eaf6），和上方工具栏的颜色一致，取色工具检测结果也会符合预期。

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