Question

我有一个用React mui v3构建的项目。在我的组件中，我想通过将border-bottom-bottom设置为与其他选项卡不同的值来覆盖所选选项卡的样式。我尝试通过使用新样式设置类和所选属性来首先在组件级别执行此操作：

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。但是，那没有用，如何覆盖所选标签的样式呢？

Answer 1

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

材料用户界面：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"

      }

    }

  }

}

React MUI-所选标签的替代样式不起作用

1 个答案: