IT技术 - 如何在主题覆盖中覆盖用于react的材料 ui 的选定颜色 - 吾爱随笔录

如何在主题覆盖中覆盖用于react的材料 ui 的选定颜色

IT技术 reactjs tabs overriding material-ui

2021-05-19 09:48:54

我想为 React覆盖Material ui 中所有选项卡的选定文本颜色。我知道我可以使用以下代码覆盖某些部分：

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        color: '#000000',
        backgroundColor: '#ffffff',
        '&:hover': {
          backgroundColor: 'rgba(108, 130, 168, 0.11764705882352941)',
          color: '#000000',
        }
      }
    }
  }
});

其次是

 <MuiThemeProvider theme={theme}>
    <HomePage/>
 </MuiThemeProvider>

但是，选择选项卡时，它会应用一个类，例如“muitab-textColorprimary-144.muitab-selected-146”。当 Tab 组件被选中时，如何为 textColorPrimary 指定全局覆盖颜色？我对全局覆盖而不是单个实例覆盖特别感兴趣。缺少 Tab 组件的特定方式，我将如何为“选定的”primaryTextColor 指定全局覆盖？

4个回答

代码：

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: orange[700]
      }
    },
    MuiTab: {
      root: {
        "&:hover": {
          backgroundColor: pink[100],
          color: pink[700]
        }
      },
      selected: {
        backgroundColor: orange[100],
        color: orange[700],
        "&:hover": {
          backgroundColor: green[100],
          color: green[700]
        }
      }
    }
  }
});

现场示例：https : //codesandbox.io/s/mj9x1zy4j9

已接受答案中的 CodeSandbox 示例在最新版本的 MUI (3.9.1) 中不再有效，当我尝试使用建议的更改修复问题时，它又给出了另一条错误消息。请参阅下面的屏幕截图。请参阅下面的解决方案。

eps1lon 向我展示了如何在此代码沙箱上执行此操作。这现在应该是公认的答案。

也可以使用 TabIndicatorProps

<Tabs
  value={value}
  onChange={this.handleChange}
  TabIndicatorProps={{
    style: {
      backgroundColor: "#D97D54"
    }
  }}
>
...
</Tabs>

如果你需要无指标

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: `transparent`
      }
    },

为了覆盖selected规则，您需要使用$ruleName语法。规则覆盖应该在根定义中：（具有固定语法的分叉代码沙箱）

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: orange[700]
      }
    },
    MuiTab: {
      root: {
        "&:hover": {
          backgroundColor: pink[100],
          color: pink[700]
        },
        "&$selected": {
          backgroundColor: orange[100],
          color: orange[700],
          "&:hover": {
            backgroundColor: cyan[500],
            color: green[700]
          }
        }
      }
    }
  }
});

其它你可能感兴趣的问题