React JS项目中Material UI组件不生效 页面空白控制台报错

问题根因 #

Material UI v5+ 版本默认依赖Emotion作为样式渲染引擎，仅安装@mui/material包、缺失Emotion相关必填依赖时，会直接导致组件运行报错无法挂载，最终出现页面空白。

操作步骤 #

• 安装缺失依赖
  在项目根目录终端执行对应包管理工具的安装命令：
  npm环境：

  npm install @emotion/react @emotion/styled
  

  yarn环境：

  yarn add @emotion/react @emotion/styled
  

• 排查依赖冲突
  如果项目中存在v4及更早版本的MUI包（包名前缀为@material-ui/），先执行命令卸载旧包，避免新旧版本依赖冲突：

  # npm卸载旧版本
  npm uninstall @material-ui/core @material-ui/icons
  # yarn卸载旧版本
  yarn remove @material-ui/core @material-ui/icons
  

  安装完成后确认@mui/material、@emotion/react、@emotion/styled三个包无跨大版本混用的情况。
• 验证修复
  终止当前运行的本地开发服务，重新执行启动命令（npm start/yarn start）清空运行缓存后访问页面，即可正常渲染指定的outlined样式按钮。

你提供的App.js代码本身无语法或逻辑错误，无需修改组件代码，补全依赖后即可正常运行。

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