How to override selected color in theme override for material ui for react

问题

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',
        }
      }
    }
  }
});

followed by

 <MuiThemeProvider theme={theme}>
    <HomePage/>
 </MuiThemeProvider>

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?

回答1:

CODE:

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

LIVE EXAMPLE: https://codesandbox.io/s/mj9x1zy4j9

回答2:

also possible to use TabIndicatorProps

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

if you need none-indicator

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

回答3:

The CodeSandbox example in the accepted answer no longer works in the latest version of MUI (3.9.1) and when I try to fix the issue with the suggested change, it gives yet another error message. See screen captures below. See solution below.

eps1lon showed me how to do this on this code sandbox. This should now be the accepted answer.

回答4:

You should insert the selected to the root node Like this:

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

来源：https://stackoverflow.com/questions/51958068/how-to-override-selected-color-in-theme-override-for-material-ui-for-react

标签

reactjs

tabs

overriding

material-ui