如何覆盖主题覆盖中所选颜色的材质ui以进行反应答案

【问题标题】：How to override selected color in theme override for material ui for react如何覆盖主题覆盖中所选颜色的材质ui以进行反应
【发布时间】：2019-01-28 04:42:35
【问题描述】：

我想覆盖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>

However, when the tab is selected it applies a class such as '.MuiTab-textColorPrimary-144.MuiTab-selected-146'.选择 Tab 组件时，如何为 textColorPrimary 指定全局覆盖颜色？我对全局覆盖而不是单个实例覆盖特别感兴趣。缺少 Tab 组件的特定方式，我将如何为“selected”primaryTextColor 指定全局覆盖？

【问题讨论】：

标签： reactjs tabs overriding material-ui

【解决方案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

【讨论】：

这是一个很棒的答案，也是我们为什么都喜欢 stackoverflow 的一个例子。添加一个代码框链接真的是锦上添花，非常感谢。谢谢！
很高兴知道它有帮助，特别是因为我还不到一周的时间进入 react+mui 前端开发 :)
我在这个问题中问过一个关于设置material-ui工具栏高度的相关问题：stackoverflow.com/questions/52043271/…
最新版 Material-UI 见下方升级语法
Lamber 下面的注释是正确的。上面的例子需要更新。现在选定的选择器需要这种格式。注意美元符号。 '&$selected': {backgroundColor: '棕色'}

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

也可以使用 TabIndicatorProps

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

如果你需要无指标

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

【讨论】：

【解决方案4】：

为了覆盖selected 规则，您需要使用$ruleName 语法。规则覆盖应该在根定义内： (Forked code sandbox with the fixed syntax)

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]
          }
        }
      }
    }
  }
});

【讨论】：

【解决方案5】：

你应该像这样将选中的插入根节点：

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

【讨论】：