样式化自定义组件

Question

我有这个样式组件

import { makeStyles } from "@material-ui/styles";
const AppStyles = makeStyles(theme => ({
textField: {
width: 200,
color: red
}
}));

export default AppStyles;

和这个组件

import AppStyles from '../AppStyles'
const LoginPage = (props) => {
.....
return (
<Grid 
justify="center" >
<Grid className="h-25">
<TextField
fullWidth
id="username"
className={AppStyles.textField}
/> 
.....
export default LoginPage; 

问题是，我的自定义样式没有导出，我的文本框没有一个类'textField '属性设置。我错过了什么?

<input 
aria-invalid="false" id="password" name="password" type="password" 
class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="">

谢谢

Answer 1

makeStyles不会立即给你样式，你应该调用它的返回值作为一个函数:

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

并在组件内部调用:

const classes = useStyles();

然后，你可以使用classes.textField来实现样式。