material-ui - how to refer palette in override?

问题

How can I refer the palette in a theme override?

e.g. I want to change the selected Tab to have the secondary color as background, instead of hardcoded blue

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        "&$selected": { backgroundColor: "blue" },  // TODO palette.secondary.main instead of blue
      }
    }
  },
  palette: {
    primary: { main: "black" },
    secondary: { main: "blue" }
  }
});

回答1:

You can create palette object that you can refer to:

import { createMuiTheme } from '@material-ui/core';
import createPalette from '@material-ui/core/styles/createPalette';

const palette = createPalette({
  primary: { main: "black" },
  secondary: { main: "blue" }
});

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        "&$selected": { backgroundColor: palette.secondary.main },
      }
    }
  },
  palette
});

来源：https://stackoverflow.com/questions/61695520/material-ui-how-to-refer-palette-in-override