Material UI无法渲染求助：使用组件时浏览器页面空白怎么办？

问题描述 #

我正在跟随2022年1月30日的项目教程，已使用--legacy-peer-deps安装Material UI及图标，但尝试使用AppBar和Typography组件时，浏览器页面完全空白，组件未渲染。

相关代码文件 #

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import Header from "./components/Header";
function App() {
    return (
    <div>
        <Header/>
    </div>
    );
}

export default App;

Header.js

import React from "react";
import { AppBar, Typography } from "@mui/material";
const Header = () => {
  return (
        <div>
            <AppBar >
        <Typography>E-Granthalaya</Typography>
        </AppBar>
        </div>
  );
};

export default Header;

解决方案 #

• 补全MUI核心依赖并适配版本
  你安装的是MUI v5（@mui/material），但--legacy-peer-deps可能跳过了必要的peer依赖（如emotion相关包），执行以下命令安装兼容版本的核心依赖：

  npm install @mui/material@5.5.0 @emotion/react@11.8.0 @emotion/styled@11.8.0 --legacy-peer-deps
  

• 调整组件属性确保可见性
  MUI v5的AppBar默认固定在顶部，可能导致内容被遮挡；Typography未指定variant时样式可能异常。修改Header.js：

  import React from "react";
  import { AppBar, Typography } from "@mui/material";
  const Header = () => {
    return (
      <div>
        <AppBar position="static">
          <Typography variant="h6" sx={{ padding: 2 }}>E-Granthalaya</Typography>
        </AppBar>
      </div>
    );
  };
  export default Header;
  

• 验证React版本兼容性
  你的代码使用了React 18的ReactDOM.createRootAPI，需确保package.json中react和react-dom版本为17或18：

  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  

  版本过低会导致渲染失败，可执行npm install react@latest react-dom@latest升级。

• 查看控制台定位具体错误
  打开浏览器开发者工具（F12），切换到Console面板，查看是否有模块导入失败、依赖缺失等错误信息，这是快速定位问题的关键。

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