Material-ui: When I use color by purple[300], it's error, but if I use by purple, it's OK. Why?

[shifengchen]

Problem description

Error: primary must have the following attributes: 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/style/colors.
new PaletteColorError
http://localhost:3001/assets/vendor.js:14796:145
createPalette
http://localhost:3001/assets/vendor.js:14803:13
createStyleManager
http://localhost:3001/assets/client.js:660:82
_callee$
http://localhost:3001/assets/client.js:558:35
tryCatch
http://localhost:3001/assets/vendor.js:69177:40
Generator.invoke [as _invoke]
http://localhost:3001/assets/vendor.js:69415:22
Generator.prototype.(anonymous function) [as next]
http://localhost:3001/assets/vendor.js:69229:21
step
http://localhost:3001/assets/client.js:629:191
http://localhost:3001/assets/client.js:629:361

My code

function createStyleManager() {
  return MuiThemeProvider.createDefaultContext({
    theme: createMuiTheme({
      palette: createPalette({
        primary: purple[300],
        accent: red,
        type: 'light',
      }),
    }),
  });
}

Versions

• Material-UI: 1.0.0-alpha.20
• React: 15.5.4
• Browser: Chrome 54.0.2840.71 (64-bit)

[oliviertassinari]

Use the color, not the hue. You can learn about it in the documentation

A hue/shade is a single color within a palette. A palette is a collection of hues.

function createStyleManager() {
  return MuiThemeProvider.createDefaultContext({
    theme: createMuiTheme({
      palette: createPalette({
        primary: purple,
        accent: red,
        type: 'light',
      }),
    }),
  });
}