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

【问题标题】：Material-UI v1: Using the custom colors for theme configurationMaterial-UI v1：使用自定义颜色进行主题配置
【发布时间】：2018-02-15 06:27:55
【问题描述】：

这应该是一件非常简单的事情，但我对 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,对比度默认颜色查看从导出的默认颜色、靛蓝或粉红色材料-ui/颜色。警告@ bundle.js:37805"

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

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

更新： 正如我从docs 中读到的，您可能需要同时设置色调和颜色值，以便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

【讨论】：

谢谢，本尼。赞赏。问题是我在调色板中找不到#6699cc 色调：link。我该怎么办？
如果您想使用自定义十六进制颜色，我认为您可以将主要设置为该十六进制，因为red[500] 也返回一个十六进制值。如果您想使用 Material-UI 颜色，颜色模块只是为了简化它。
我明白，但是将主要颜色设置为十六进制 code primary:'#6699CC' code` 会出现错误 italic"Material-UI: Primary color is missing the following hues"italic我>。这曾经在 0.19 中工作，但不再适用于 v1。如果我在这里犯了错误，或者这是 v1 的错误，你能告诉我吗？

【解决方案2】：

这对我自己的项目很有用。 Material ui 可以为您制作调色板色调，只需提供您想要使用的颜色的亮/主/暗属性。见https://material-ui.com/style/color/

import { createMuiTheme } from '@material-ui/core/styles';
import { yellow, orange } from '@material-ui/core/colors';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#ea212d',
    },
    secondary: yellow,
    error: orange,
  },
  typography: {
    fontFamily:
        'roboto, sans-serif',
  },
});

export default muiTheme;

【讨论】：

这是在material-ui v1中使用的

【解决方案3】：

来自文档：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    }
  }
}

【讨论】：