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

Posted 2023-02-22

【中文标题】如何覆盖主题覆盖中所选颜色的材质ui以进行反应

【英文标题】：How to override selected color in theme override for material ui for react

【发布时间】：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 指定全局覆盖？

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

【讨论】：

这是一个很棒的答案，也是我们为什么都喜欢 *** 的一个例子。添加一个代码框链接真的是锦上添花，非常感谢。谢谢！

很高兴知道它有帮助，特别是因为我还不到一周的时间进入 react+mui 前端开发 :)

我在这个问题中问过一个关于设置material-ui工具栏高度的相关问题：***.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]            
          
        ,
      
    
);