React项目已安装Material UI仍出现多组件导入报错如何解决？

你当前使用的是@material-ui/core的v5 beta测试版本，该版本属于MUI官方的过渡测试产物，包结构、导出规则均不稳定，且MUI v5正式版已将包名统一从@material-ui/*更改为@mui/*，旧beta版不兼容现有导入逻辑。

• 方案一：升级到MUI v5正式版（推荐）

  1. 卸载现有beta版本依赖

     npm uninstall @material-ui/core
     # 若安装过@material-ui/icons也一并卸载
     npm uninstall @material-ui/icons
     

  2. 安装v5正式版及配套样式依赖

     npm install @mui/material @emotion/react @emotion/styled
     # 需使用图标则额外安装
     npm install @mui/icons-material
     

  3. 修改组件导入语句
     将原代码中

     import { Button, Container, Grid, TextField } from '@material-ui/core';
     

     修改为

     import { Button, Container, Grid, TextField } from '@mui/material';
     

  4. 清除缓存重启项目
     删除node_modules文件夹、package-lock.json文件后重新执行npm install，再启动项目即可。

• 方案二：回退到MUI v4稳定版
  如果你不想修改现有导入语句，可直接卸载beta版后安装v4稳定版：

  npm uninstall @material-ui/core
  npm install @material-ui/core@4.12.4
  

  无需修改导入代码，直接重启项目即可正常运行。

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