Getting a error TypeError: color.charAt is not a function in C:/...../node_modules/@material-ui/core/styles/colorManipulator.js:148
my solution to this problem is to put all styling objects inside another object leaving out the (palette) object, and spread out only that object that does not contain the (palette)
const theme = createMuiTheme({
palette: {
primary: {
light: '#33c9dc',
main: '#00bcd4',
dark: '#008394',
contrastText: '#fff'
},
secondary: {
light: '#ff6333',
main: '#ff3d00',
dark: '#b22a00',
contrastText: '#fff'
}
},
// the object to be spread
spreadThis: {
typography: {
useNextVariants: true
},
form: {
textAlign: "center"
},
image: {
margin: "10px auto 10px auto"
},
pageTitle: {
margin: "10px auto 10px auto"
},
textField: {
margin: "10px auto 10px auto"
},
button: {
marginTop: 20,
position: "relative"
},
customError: {
color: "red",
fontSize: "0.8rem",
marginTop: 5
},
progress: {
position: "absolute"
}
}
});
now you would do this in the styles object
const style = theme => ({
...theme.spreadThis
});
hope this works out for you too! good luck