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

Question

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?

Answer 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

Answer 2

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.