can't pass theme to child components Material-Ui - React? - reactjs

Question

I am trying to create a global theme with shared styles between component, so i don't need to repeat the same classes in each component, so i have a theme file:
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 80,
height: 50
},
customError: {
color: 'red',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
and in App.js
import themeFile from './theme';
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
import {MuiThemeProvider} from '#material-ui/core/styles';
const theme = createMuiTheme(themeFile);
<MuiThemeProvider theme={theme}>
<Signin />
</MuiThemeProvider>
in Signin page:
import makeStyles from '#material-ui/core/styles/makeStyles';
const useStyles = makeStyles(theme => ({
...theme
}));
const Signin = (props) => {
const classes = useStyles();
return //some form and style elements using classes
}
But i get an error TypeError: color.charAt is not a function, i don't know if i am doing it right, i tried to use withStyles but ii got the same error, what is wrong in my code?

Answer 1

Ciao, the problem is on color in customError. You cannot use 'red' in material ui theme. Try to replace it with #FF0000.

Answer 2

I found a solution for my problem, is by wrapping all properties other than pallette in an object like this
theme.js
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
spread: {
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 90,
height: 50
},
customError: {
color: '#FF0000',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
}
Signin page
const useStyles = makeStyles(theme => ({
...theme.spread
}));