如何使用CSS Modules定位MUI组件的.Mui-selected状态类

问题根源在于CSS Modules的局部作用域机制：你自定义的.myTab会被编译为带哈希后缀的局部类名（比如myTab_xyz789），但MUI自带的.Mui-selected是全局类名。直接连写的选择器.myTab.Mui-selected会被CSS Modules处理成.myTab_xyz789.Mui-selected_abc123（给.Mui-selected也加上了哈希），导致无法匹配DOM上实际存在的myTab_xyz789 Mui-selected类组合。

下面是几种可行的解决方法：

方法1：用:global()包裹全局类 #

通过:global()标记MUI的全局类，避免CSS Modules给它添加哈希后缀，让选择器能正确匹配：

/* 写法1 */
.myTab:global(.Mui-selected) {
  color: red;
  border-radius: 50%;
}

/* 写法2（效果一致） */
:global(.Mui-selected).myTab {
  color: red;
  border-radius: 50%;
}

方法2：通过MUI的classes prop直接覆盖选中样式 #

利用MUI组件提供的classes接口，直接指定选中状态的自定义类，无需处理全局类冲突：

<Tab
  classes={{ selected: classes.mySelectedTab }}
>
  {children}
</Tab>

对应的CSS：

.mySelectedTab {
  color: red;
  border-radius: 50%;
}

排查小技巧 #

如果还是不生效，可以先检查：

1. CSS注入顺序是否确实让你的自定义样式在MUI默认样式之后加载
2. 临时加!important验证样式是否能被应用（仅用于排查，不推荐长期使用）：

.myTab:global(.Mui-selected) {
  color: red !important;
  border-radius: 50% !important;
}

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