如何在主题替代中覆盖材料ui的选定颜色以进行反应 [英] How to override selected color in theme override for material ui for react

问题描述

我想为 React的材料ui中的所有标签覆盖选定的文本颜色.我知道我可以使用以下代码覆盖某些部分:

I would like to override the selected text color for all tabs in material ui for React. I know I can override some portions with code such as this:

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选定-146' .选择Tab组件时，如何为textColorPrimary指定全局替代颜色?我对全局替代而不是对单个实例替代特别感兴趣.缺少Tab组件的特定方式，如何为选定的" primaryTextColor指定全局替代?

However, when the tab is selected it applies a class such as '.MuiTab-textColorPrimary-144.MuiTab-selected-146'. How can I specify a global override color for textColorPrimary for the Tab component when it is selected? I'm specifically interested in a global override and not an individual instance override. Lacking a specific way for the Tab component, how would I specify a global override for 'selected' primaryTextColor?

推荐答案

代码:

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

这篇关于如何在主题替代中覆盖材料ui的选定颜色以进行反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！