如何覆盖材料ui的主题覆盖中的选定颜色以进行反应

Question

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

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组件的特定方式，我如何为'selected'primaryTextColor指定全局覆盖？

Answer 1

码：

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

Answer 2

也可以使用TabIndicatorProps

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

如果你不需要指标

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

Answer 3

接受的答案中的CodeSandbox示例不再适用于最新版本的MUI（3.9.1），当我尝试使用建议的更改修复问题时，它会给出另一个错误消息。请参阅下面的屏幕截图。见下面的解决方案

eps1lon向我展示了如何在这个code sandbox上做到这一点。这应该是公认的答案。

Answer 4

您应该将所选内容插入根节点，如下所示：

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