如何使用CSS模块定位.Mui选择的状态类

Question

我想自定义 MUI 选项卡组件的选定选项卡。我的样式选择是 CSS 模块。但我很难应用正确的选择器。我还应用了他们的 CSS 注入顺序，以便我可以根据文档自定义样式。

我根据他们的文档尝试了以下操作。 我的自定义选项卡有一个名为 .myTab 的类。

.myTab.Mui-selected {
 color: red;
 border-radius: 50%;
}

然后我将该类应用到我的选项卡。

    <Tab
      className={classes.myTab}>
      {children}
    </Tab>

但到目前为止我还没有成功。

这里是一个游乐场。

Answer 1

您需要使用CSS模块的

:global()

选择器，如下所示：

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

您可以查看这个 StackBlitz 的实时工作示例。