Material-UI v1：使用自定义颜色进行主题配置

Question

这应该是一件非常简单的事情，但我对material-ui还很陌生。我正在使用material-ui v1，并且我正在尝试更改主题的主要颜色。这是我的主题对象在不使用自定义颜色的情况下的样子：

import { createMuiTheme } from 'material-ui-next/styles';
import blue from 'material-ui-next/colors/purple';
import green from 'material-ui-next/colors/green';
import red from 'material-ui-next/colors/red';


const theme = createMuiTheme({
    palette: {
        primary: green, 
        secondary: {
          ...green,
         },
       error: red,
     },
});


export default theme;

在原色中，我想使用我的自定义颜色“#6699CC”。如果我分配主要：'#6699CC'，它会给出以下错误：

“Material-UI：主色缺少以下色调：50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor 请参阅从material-ui/colors导出的默认颜色，靛蓝或粉红色。警告@bundle.js:37805 ”

这用于 0.19 beta 版本，但不适用于 V1-beta。谁能帮我解决这个问题吗？

Answer 1

检查Color的文档。我认为您需要在选择颜色时设置色调。

import { red, purple } from 'material-ui/colors';

const primary = red[500]; // #F44336
const accent = purple['A200']; // #E040FB

更新： 正如我从文档中读到的那样，您可能需要将色调和颜色值一起设置，以便material-ui可以知道它需要渲染哪种颜色。

尝试根据下面的 JSON 对象设置主颜色。

{
    primary: {
      50: "#e3f2fd",
      100: "#bbdefb",
      200: "#90caf9",
      300: "#64b5f6",
      400: "#42a5f5",
      500: "#2196f3",
      600: "#1e88e5",
      700: "#1976d2",
      800: "#1565c0",
      900: "#0d47a1",
      A100: "#82b1ff",
      A200: "#448aff",
      A400: "#2979ff",
      A700: "#2962ff",
      contrastDefaultColor: "light"
    }
}

PS：你正在尝试import blue从/colors/purple