分解反应材料中的颜色代码

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定义为对象：

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',
};

更新在您的情况下，您可以使用这样的代码段（我已将您的颜色代码＃2ab667用于A400，与其他密钥的颜色不同）：

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

Answer 2

palette: {
    primary: purple

以上表示调色板的“主颜色为purple”。 purple 颜色在其中预先定义了一组色调（或阴影），范围从#F3E5F5到#AA00FF。 您最喜欢的#2ab667是色调，而不是颜色。

如果您希望将所有主要标记的组件设为“{1}}”，

类似的东西：

#2ab667

按上面Dane

的建议进行处理