React项目@material-ui/core组件及内嵌图片不显示问题求助

MUI组件完全不渲染的问题，90%以上是MUI版本和React版本不兼容、依赖安装不全导致的，按以下步骤逐一排查即可：

1. 优先解决版本不匹配问题 #

你学习的这套旧教程用的是MUI v4（包名为@material-ui/core），如果当前项目用最新版create-react-app创建，默认安装的React 18、MUI v5（包名已改为@mui/material）会和教程代码完全不兼容，二选一处理即可：

• 方案1（和教程版本完全对齐，避免后续踩坑）：
  先卸载错误版本依赖：

  npm uninstall @material-ui/core @material-ui/icons react react-dom
  

  安装教程对应兼容版本：

  npm install react@17 react-dom@17 @material-ui/core@4.12.3 @material-ui/icons@4.11.2
  

• 方案2（用最新MUI v5，修改导入路径）：
  卸载旧包：

  npm uninstall @material-ui/core @material-ui/icons
  

  安装v5必需依赖：

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

  把App.js里的MUI组件导入路径从@material-ui/core改成@mui/material即可。

2. 补充基础样式重置组件 #

MUI组件依赖内置的样式基线重置默认浏览器样式，否则可能出现布局错位、元素被隐藏的问题，在App.js中引入CssBaseline组件放在最外层，修改后的完整代码如下：

import React from 'react';
// v4版本用这行导入
import { Container, AppBar, Typography, Grow, Grid, CssBaseline } from '@material-ui/core';
// v5版本用下面这行导入
// import { Container, AppBar, Typography, Grow, Grid, CssBaseline } from '@mui/material';

import memories from './images/memories.png'

const App = () => {
    return (
      <>
        <CssBaseline />
        <Container maxWidth="lg">
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Memories</Typography>
                <img src={memories} alt="memories" height="60" width="60" />
            </AppBar>
        </Container>
      </>
    );
};

export default App;

3. 残留问题排查 #

如果以上操作后还是不显示，按顺序处理：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，排除安装过程中依赖丢包的问题
• 打开浏览器开发者工具的「控制台」面板（不是终端的编译日志），查看红色报错信息，按照报错提示安装缺失的依赖即可（最常见的是缺少@emotion/react/@emotion/styled这类样式依赖）
• 先用最小Demo验证：把App.js内容替换为单个MUI按钮测试，如果按钮能正常显示，再逐步加回其他业务代码，定位是哪段代码导致的渲染异常
• 终端提示的未使用导入（Grow、Grid）属于正常警告，完全不影响组件渲染，后续用到对应组件时警告会自动消失，不用特意处理。

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