reactjs - 分解 react Material 中的颜色代码

Question

我正在使用react-material和MuiThemeProvider组件来使用主题。

这是我从网站上下面给出的示例中复制的代码

const theme = createMuiTheme({
  palette: {
    primary: purple, // Purple and green play nicely together.
    secondary: {
      ...green,
      A400: '#00e677',
    },
    error: red,
  },
});

当我像这样更改上面的代码primary:'#2ab667'时，它会给出错误

所以，我不知道我哪里做错了，也不知道如何使用任何颜色代码，而不是使用 Material 中的特定颜色

Answer 1

看来值必须是对象。尝试像对 Secondary 所做的那样，将 Primary 定义为一个对象:

primary: {
  50: '#f3e5f5',    // replace or delete all colors as you wish
  100: '#e1bee7',
  200: '#ce93d8',
  300: '#ba68c8',
  400: '#ab47bc',
  500: '#9c27b0',
  600: '#8e24aa',
  700: '#7b1fa2',
  800: '#6a1b9a',
  900: '#4a148c',
  A100: '#ea80fc',
  A200: '#e040fb',
  A400: '#d500f9',
  A700: '#aa00ff',
  contrastDefaultColor: 'light',
};

或者重复使用紫色并更改某些色调:

primary: {
  ...purple,
  A700: '#aa00ff',
};

更新在您的情况下，您可以使用这样的代码片段(我在 A400 中使用了您的颜色代码 #2ab667，在其他按键中使用了不同的颜色代码):

primary: {
  A100: '#ADF9CE',
  A200: '#5EE599',
  A400: '#2ab667',
  A700: '#188146',
  contrastDefaultColor: 'light'
},
secondary: ...