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

问题描述 投票:0回答:2

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

Tab

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

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

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

css reactjs material-ui tabs
2个回答
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


0
投票

此外,您可以使用

theme.ts
自定义它:

MuiTab: {
    styleOverrides: {
      root: ({ theme }: { theme: Theme }) => ({
        color: 'black',
        "&.Mui-selected":{
          color: 'red'
        }
      }),
    },
  },
© www.soinside.com 2019 - 2024. All rights reserved.