Material-UI v1:使用自定义颜色进行主题配置 [英] Material-UI v1: Using the custom colors for theme configuration

问题描述

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

This should be a pretty simple thing but I am pretty new to material-ui.I am using material-ui v1 and I am trying to change the primary color of the theme. This is how my theme object looks like without using the custom color:

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'，则会出现以下错误:

In the primary color, I wanted to use my custom color which is '#6699CC'. If I assign primary:'#6699CC', it gives me following error :

"Material-UI:原色缺少以下色调: 50,100,200,300,400,500,600,700,800,900，A100，A200，A400，A700，对比度默认颜色 查看从中导出的默认颜色，靛蓝或粉红色 material-ui/颜色.警告@ bundle.js:37805"

"Material-UI: primary color is missing the following hues: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor See the default colors, indigo, or pink, as exported from material-ui/colors. warning @ bundle.js:37805"

此功能曾用于0.19 beta版本，但不适用于V1-beta.谁能帮我这个忙吗?

This was used to work in 0.19 beta release but it does not work with V1-beta. Can anyone please help me with this?

推荐答案

检查文档以查找

Check documentation for Color. You need to set hue while selecting colors I think.

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

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

更新: 正如我从 docs 所读到的那样，您可能需要一起设置色相和颜色值，以便material-ui可以知道它需要呈现哪种颜色.

Update: As I read from the docs you might need to set hue and color value together so material-ui can know which color it needs to render.

尝试根据下面的JSON对象设置您的原色.

Try to set your primary color according to the JSON object below.

{
    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:您正尝试从/colors/purple

这篇关于Material-UI v1:使用自定义颜色进行主题配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！