时间戳

首页 > 解决方案 > React MUI - 选定选项卡的覆盖样式不起作用

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

问题描述

我有一个用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]
    }
  }
}

这是示例。但是，这不起作用，您如何覆盖所选选项卡的样式？

标签： reactjsreact-material

解决方案

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

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"

      }

    }

  }

}

推荐阅读