React前端引入Material UI Button后页面显示空白问题求助

问题排查与解决方案 #

• 第一步：先打开浏览器F12控制台查看运行时报错，编译成功仅代表语法无问题，空白页基本都是运行时JS异常导致的渲染中断，控制台的错误信息可以直接定位根因。
• 最常见的根因是版本不兼容：你安装的@material-ui/core是Material UI v4的包，该版本最高仅支持React 17，如果你当前项目使用的是React 18及以上版本，就会出现运行时报错导致全页空白。你可以打开项目根目录的package.json文件，查看dependencies字段下的react版本号确认。
  对应两种解决方案：
  1. 继续使用Material UI v4：将React版本降级到17
     执行以下命令安装React 17：

     npm install react@17 react-dom@17
     

     然后修改项目入口文件（一般是src/index.js）的渲染逻辑，将React 18的createRoot写法替换为React 17的渲染写法：

     // 替换掉原来的createRoot相关代码
     import ReactDOM from 'react-dom'
     ReactDOM.render(<App />, document.getElementById('root'))
     

  2. 适配React 18+，升级到Material UI v5：
     先卸载旧版v4依赖：

     npm uninstall @material-ui/core
     

     安装新版v5的依赖包：

     npm install @mui/material @emotion/react @emotion/styled
     

     最后修改Header组件的MUI导入语句：
     把import { Button } from '@material-ui/core'修改为import { Button } from '@mui/material'
• 小概率排查项：可以临时注释掉Header组件中import './Header.css'这一行，确认是否是自定义样式和MUI组件样式冲突导致的元素不可见。

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