Question

这应该是一个非常简单的事情，但我对材料-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＆＃39;。如果我指定主要：＆＃39;＃6699CC＆＃39;，则会出现以下错误：

＆＃34; Material-UI：原色缺少以下色调： 50,100,200,300,400,500,600,700,800,900，A100，A200，A400，A700，contrastDefaultColor 查看从中导出的默认颜色，靛蓝或粉红色材料的UI /颜色。警告@bund.js：37805＆＃34;

这曾用于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

<强>更新当我从docs读取时，您可能需要将色调和颜色值设置在一起，因此材料-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

Answer 2

这对我自己的项目很有效。材质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;

Answer 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
    }
  }
}

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

3 个答案: