Question

您好我尝试自定义材质ui的主要文本颜色，

我这样做是为了自定义原色：

const blue = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const muiTheme = createMuiTheme({
  palette: {
    primary: blue,
  },

但我没有得到它如何自定义文本颜色。怎么做？

Answer 1

我终于知道它是如何运作的：

要覆盖类，您需要准确编写组件的覆盖名称，例如按钮是MuiButton。覆盖的工作方式与类名f.e相同。如果我有.MuiButton-label-1607作为类别应该是

overrides: {
  MuiButton: {
    label: {
      color: 'white', .....

覆盖标签的颜色，所以我终于：

const blue = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const yellow = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const muiTheme = createMuiTheme({
  palette: createPalette({
    primary: blue,
    secondary: yellow,
    accent: yellow,
  }),
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
      raisedAccent: {
        color: 'white',
      },
    },
    MuiCheckbox: {
      checked: {
        color: '#607d8b',
      },
    },
    MuiAppBar: {
      colorPrimary: {
        color: 'white',
      },
    },
  },
});

如何在v 1.0.0中的材质ui中自定义文本颜色

1 个答案: