React MUI - 选定选项卡的覆盖样式不起作用答案

【问题标题】：React MUI - overriding styling for selected tab not workingReact MUI - 选定选项卡的覆盖样式不起作用
【发布时间】：2020-03-04 04:28:09
【问题描述】：

我有一个使用React mui v3 构建的项目。在我的组件中，我想通过将边框底部设置为与其他选项卡不同的值来覆盖所选选项卡的样式。我首先尝试在组件级别通过使用新样式设置类和选定属性来做到这一点：

tab: {
    color: '#077197',
    fontWeight: 'bold',
    fontSize: '0.9rem',
    borderBottom: `1px solid ${theme.palette.divider}`,
},
selected: {
    border: `1px solid ${theme.palette.divider}`,
    borderBottom: '1px solid white',
    background: 'white',
  },

并在标签上使用它：

<Tab value="1" label="First value"
           classes={{root: classes.tab, selected: classes.selected}}/>

但是，在控制台中，我可以看到所选类被选项卡所选样式覆盖。我也尝试在主题级别上做到这一点，将MuiTab 设置为：

MuiTab: {
  selected: {
    backgroundColor: "white",
    border: "1px solid white",
    color: orange[700],
    "&:hover": {
      color: green[700]
    }
  }
}

这里是example。但是，这不起作用，您如何覆盖所选标签的样式？

【问题讨论】：

标签： reactjs react-material

【解决方案1】：

在您的示例中，您可以在控制台中阅读：

Material-UI：MuiTab 组件增加了selected 内部状态的 CSS 特异性。你不能像这样覆盖它：

{

  "root": {

    "&:hover": {

      "backgroundColor": "white",

      "color": "#c2185b",

      "border": "1px solid black"

    }

  },

  "selected": {

    "backgroundColor": "white",

    "border": "1px solid white",

    "color": "#f57c00",

    "&:hover": {

      "color": "#388e3c"

    }

  }

}

相反，您需要使用 $ruleName 语法：

{

  "root": {

    "&$selected": {

      "backgroundColor": "white",

      "border": "1px solid white",

      "color": "#f57c00",

      "&:hover": {

        "color": "#388e3c"

      }

    }

  }

}

【讨论】：