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

Posted 2023-02-22

【中文标题】所选材质 UI 选项卡的颜色与其他选项卡不同

【英文标题】：Material UI tab selected has different color than the rest of tabs

【发布时间】：2021-10-26 00:49:11

【问题描述】：

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

我有一个问题，即所选选项卡和其他选项卡具有不同的不透明度（？），即使它们是相同的颜色。在线找不到任何材料 UI 文档以使其统一，我尝试了几件事 [TabIndicatorProps] 甚至在下面添加到 Tabs 类

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

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

【问题讨论】：

你试过“不透明度：0.7”吗？

您还可能遇到 css 特定性层次结构问题，其中 id 正在应用样式，这将推翻应用于类的任何 css。

我做到了。没有区别。

【参考方案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