material-ui-如何在替代中引用调色板? [英] material-ui - how to refer palette in override?

问题描述

如何在主题替代中引用调色板?

How can I refer the palette in a theme override?

例如我想将所选的 Tab 更改为具有辅助颜色作为背景，而不是硬编码的 blue

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

推荐答案

您可以创建可以引用的调色板对象:

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

这篇关于material-ui-如何在替代中引用调色板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！