Material-ui: Customizing theme color throws an error " Cannot read property 'charAt' of undefined"

[kavink]

I am using the latest "v1.0.0-beta.20".

const theme = createMuiTheme({
  palette: {
    primary: grey[100],
    secondary: blue['A400']
  },
});

TypeError: Cannot read property 'charAt' of undefined
decomposeColor
node_modules/material-ui/styles/colorManipulator.js:106
  103 |  * @returns {{type: string, values: number[]}} A MUI color object
  104 |  */
  105 | function decomposeColor(color) {
> 106 |   if (color.charAt(0) === '#') {
  107 |     return decomposeColor(convertHexToRGB(color));
  108 |   }
  109 | 



md5-123d04896ef83db268b625ec7a67fc5c



const theme = createMuiTheme({
  palette: {
    primary: grey,
    secondary: blue
  },
});

[oliviertassinari]

Have a look at the warnings in the console. You can't provide a hue, it needs to be a full-color object. Follow #8075 for a better story.

[caub]

That error happened recently when I upgraded to v1.0.0-beta.28 with this change

So the new format is

  palette: {
    primary: { light: blue[300], main: blue[500], dark: blue[700] }
  }

in createTheme

@mbrookes Wouldn't it be better to default to '500' for main, etc.. to avoid a breaking change? to allow passing color variants like before too:

  palette: {
    primary: blue // now this breaks with the charAt error
  }

[oliviertassinari]

We will soon cut a release. @mbrookes has been working on making the latest palette change non-breaking #9889.

[rolandjitsu]

@oliviertassinari note that the typings have not been updated. The palette object still expects one of those Partial<Color> objects.

[oliviertassinari]

@rolandjitsu #9896

[pavanshinde47]

I am using "material-ui-next": "^1.0.0-beta.44" , How to fix this issie?

[oliviertassinari]

@pavanshinde47 Do you have a reproduction example?

[pavanshinde47]

@oliviertassinari No, I dont. I have just followed instructions from here https://material-ui-next.com/guides/migration-v0.x

Ran the migration and after that i got the error.