无法将主题传递给子组件 材料用户界面 - 反应？

Question

我正在尝试创建一个全局主题，在组件之间共享样式，所以我不需要在每个组件中重复相同的类，所以我有一个主题文件：

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'
}
}

以及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>

在登录页面：

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
}

但是我得到了一个错误TypeError: color.charAt is not a function，我不知道我做得是否正确，我试图使用withStyles，但我得到了同样的错误，我的代码出了什么问题？

Answer 1

Ciao，问题出在customError中的颜色上。不能在材质ui主题中使用"红色"。尝试将其替换为#FF0000。

Answer 2

我找到了一个解决问题的方法，那就是将托盘以外的所有属性包装在像这样的对象中

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'
}
}
}

登录页面

const useStyles = makeStyles(theme => ({
...theme.spread
}));