Material UI 所选选项卡的颜色与其余选项卡的颜色不同

Question

Material UI 的新手所以希望这个问题是有道理的。我正在使用 Material UI 选项卡，并且能够根据需要自定义 css。见下文：

我遇到一个问题，即所选选项卡和其他选项卡具有不同的不透明度（？），即使它们是相同的颜色。无法在网上找到任何 material UI 文档来使它们统一，我尝试了几种方法 [TabIndicatorProps] 甚至在选项卡下方添加 class

"&.Mui-selected": {
      color: "1D4659",
      opacity: "70%"
    }

有谁知道如何解决这个问题？我可以更改选定的选项卡或其他选项卡。我只是想确保它们是统一的。

Answer 1

您可以覆盖 MuiTab-root 而不是 Mui-selected。

1- 声明您的自定义样式

const useStyles = makeStyles({
  customTabs: {
    "& .MuiTab-root": {
      color: "#1D4659",
      opacity: "70%"
    }
  }
});

2- 在 <Tabs>

中使用自定义样式

     const classes = useStyles();

     <Tabs
        classes={{ root: classes.customTabs }}
        ...
      >
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
    </Tabs>

代码如下：https://codesandbox.io/s/gracious-framework-xo1cp?file=/src/App.js

Material UI 所选选项卡的颜色与其余选项卡的颜色不同

Material UI tab selected has different color than the rest of tabs

css

tabs

reactjs

material-ui

react-material