Material-UI makeStyles自定义样式不生效 类名未绑定问题

你的代码存在3处关键遗漏，直接导致自定义类未绑定、样式失效：

• makeStyles的返回值是自定义React Hook，并非直接导出的样式类对象。你没有在组件内调用这个Hook获取实际生成的类名映射，直接访问AppStyles.textField拿到的值是undefined，相当于没有给TextField传入任何自定义类名，自然不会在渲染结果里出现自定义类。正确用法是在函数组件内部执行const classes = AppStyles()，再通过classes.textField取对应的类名。
• 样式对象里的color: red存在语法错误，red属于未定义的变量，合法写法应该是字符串值color: 'red'，这类语法错误会直接导致样式编译失败。
• MUI的TextField是复合组件，className属性默认会绑定到组件最外层的FormControl容器DOM上，不会直接加到内部的<input>元素上。如果你需要让样式直接作用于input标签，要么通过InputProps={{ className: classes.textField }}传入类名，要么在样式里通过MUI提供的类名选择器嵌套匹配内部input元素，否则就算类名绑定正确，你写的样式也不会直接作用到你看到的input标签上。

修正后的样式文件代码 #

import { makeStyles } from "@material-ui/styles";

const AppStyles = makeStyles(theme => ({
  textField: {
    width: 200,
    color: 'red',
    // 嵌套匹配内部input元素，让样式直接作用到输入框
    '& .MuiInputBase-input': {
      width: 200,
      color: 'red'
    }
  }
}));
  
export default AppStyles;

修正后的LoginPage组件代码 #

import AppStyles from '../AppStyles'

const LoginPage = (props) => {
  // 组件内部调用hook，拿到生成的类名映射对象
  const classes = AppStyles();
  return (
    <Grid justify="center">
      <Grid className="h-25">
            <TextField
              fullWidth
              id="username"
              className={classes.textField}
            />
      </Grid>
    </Grid>
  )
}
export default LoginPage; 

补充说明：如果你使用的是MUI v5版本，makeStyles属于已废弃的 legacy API，需要额外安装@mui/styles包并配套配置ThemeProvider才能正常运行，否则也会出现类名生成异常的问题。

内容的提问来源于stack exchange，提问作者Silvio