分解react材质中的颜色代码

Question

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

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

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

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

​

​

因此，我不知道我哪里做错了，也不知道如何使用任何颜色代码，而是使用材料中的特定颜色

Answer 1

看起来值必须是对象。尝试像您对secondary所做的那样，将主对象定义为对象：

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: ...

Answer 2

palette: {
    primary: purple

上面的意思是“调色板的原色颜色 is purple”。purple color在其中预定义了一组色调(或着色)，范围从#F3E5F5到#AA00FF。你最喜欢的#2ab667是hue，而不是彩色。

如果你想让“你所有的主标签组件都带有阴影#2ab667”，

如下所示：

​

​

<Button raised color="primary">Primary</Button>

上述Dane建议的方法