React Typescript项目持续报invalid hook call错误，无法定位问题如何解决？

问题根因 #

最核心的触发原因是MUI版本混用：
代码中同时使用了两个不兼容的MUI大版本依赖：

• 组件、图标均从@mui/material、@mui/icons-material导入，属于MUI v5版本的包
• 样式工具makeStyles从@material-ui/core导入，属于MUI v4版本的包
  两个大版本的内部Hook上下文、依赖体系完全不兼容，会直接触发Invalid Hook Call报错。同时安装两个版本的MUI也大概率会导致项目中存在多份React副本，符合报错提示中的第三种诱因。

修复步骤 #

1. 卸载旧版本MUI依赖

npm uninstall @material-ui/core
# yarn用户执行 yarn remove @material-ui/core

2. 安装MUI v5兼容的样式工具依赖

npm install @mui/styles
# yarn用户执行 yarn add @mui/styles

3. 修改makeStyles导入语句
   将原有导入

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

替换为：

import { makeStyles } from "@mui/styles";

4. 补充适配：确保应用根组件外层已经使用从@mui/material/styles导入的ThemeProvider包裹，且传入的主题由同包下的createTheme生成，避免出现主题兼容问题。

如果完成上述修改后仍然报错，可执行npm ls react检查项目中是否存在多份React副本，统一React版本即可解决。

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