material theme 自定义_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;

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: 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"

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

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.

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: You are trying to import blue from /colors/purple