React项目使用MUI图标时报错找不到@emotion/react如何解决？

你遇到的报错

Module not found: Can't resolve '@emotion/react' in '.../@mui/styled-engine'
核心原因是MUI v5 版本默认以 Emotion 作为样式渲染引擎，仅安装@mui/icons-material包缺少其运行必需的核心依赖。

方案1：默认使用Emotion作为样式引擎（推荐） #

根据你使用的包管理工具执行对应命令安装缺失依赖即可：

• npm 环境执行：
  npm install @mui/material @emotion/react @emotion/styled
• yarn 环境执行：
  yarn add @mui/material @emotion/react @emotion/styled
• pnpm 环境执行：
  pnpm add @mui/material @emotion/react @emotion/styled

方案2：切换为styled-components作为样式引擎 #

如果你更偏好使用styled-components，可以手动替换样式引擎，无需安装Emotion相关包：

1. 安装对应依赖：
   npm install @mui/material @mui/styled-engine-sc styled-components
2. 在项目打包配置文件中添加别名配置，将@mui/styled-engine指向@mui/styled-engine-sc，以Vite配置为例：

export default defineConfig({
  resolve: {
    alias: {
      '@mui/styled-engine': '@mui/styled-engine-sc'
    }
  }
})

你当前的图标导入路径存在笔误，正确的导入写法为：
import HomeIcon from '@mui/icons-material/Home';
原写法中@mui/icons/material为错误路径，依赖安装完成后需要修正该导入语句，否则仍会报错。

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