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

Question

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

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

"&.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

Answer 2

此外，您可以使用

theme.ts

自定义它：

MuiTab: {
    styleOverrides: {
      root: ({ theme }: { theme: Theme }) => ({
        color: 'black',
        "&.Mui-selected":{
          color: 'red'
        }
      }),
    },
  },