material-ui - как ссылаться на палитру в переопределении?

Question

Как я могу указать палитру в переопределении темы?

например, я хочу изменить выбранный Tab, чтобы использовать вторичный цвет в качестве фона вместо жестко заданного blue

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

Answer 1

Вы можете создать объект палитры, на который вы можете ссылаться:

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