MUI v5迁移后使用makeStyles的子组件无法获取theme报错

问题根因 #

你遇到的报错是两个错误叠加导致的：

1. 跨版本上下文不兼容：你子组件中makeStyles的导入路径是v4版本的@material-ui/styles，而根组件用的是v5版本@mui/material/styles导出的ThemeProvider，两个版本包的React上下文完全独立，无法互通，所以不在初始渲染树的子组件无法正确获取到注入的theme。
2. 无效参数传递：你在调用useStyles(theme)时，组件作用域内并没有定义theme变量，相当于给useStyles传递了undefined值，直接触发取值报错。

解决步骤 #

• 第一步：安装MUI v5兼容的makeStyles依赖（v5默认不内置该API，需要手动安装）：

  npm install @mui/styles
  # 或使用yarn
  yarn add @mui/styles
  

• 第二步：替换所有组件中makeStyles的导入路径，将v4版本的导入改为v5版本：

  // 错误写法
  // import { makeStyles } from '@material-ui/styles'
  // 正确写法
  import { makeStyles } from '@mui/styles'
  

• 第三步：删除useStyles调用时传入的多余参数，makeStyles会自动从上层ThemeProvider上下文获取theme，不需要手动传递：

  // 错误写法
  // const classes = useStyles(theme)
  // 正确写法
  const classes = useStyles()
  

按以上修改后，只要子组件是在ThemeProvider包裹的组件树内渲染，不管是不是动态加载的子组件，都不需要手动传递theme即可正常使用。

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