如何在主题替代中覆盖材质ui的选定颜色以进行反应

Question

我想为React的材料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指定全局替代？

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