React项目安装@material-ui/icons遇ERESOLVE依赖冲突求助

环境信息 #

• Node版本：16.17.0
• NPM版本：8.15.0
• React版本：18.2.0

执行命令 #

npm i @material-ui/icons

错误日志 #

PS E:\react_projects\tic-tac-toe> npm i @material-ui/icons
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: tic-tac-toe@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || 17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   from @material-ui/icons@4.11.3
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2022-12-23T11_19_39_5177-debug-0.log
PS E:\react_projects\tic-tac-toe>

解决方案 #

方法1：忽略peer依赖冲突安装 #

用--legacy-peer-deps参数跳过版本校验，快速完成安装：

npm i @material-ui/icons --legacy-peer-deps

方法2：升级到MUI v5（推荐） #

原@material-ui已更名为@mui，v5版本完全兼容React18。先卸载旧包（如有），再安装新版：

# 卸载旧版Material UI包
npm uninstall @material-ui/core @material-ui/icons

# 安装MUI v5图标及核心依赖
npm install @mui/icons-material @mui/material @emotion/react @emotion/styled

之后导入组件时需修改路径，例如：

import HomeIcon from '@mui/icons-material/Home';

方法3：降级React到17.x版本 #

若必须使用@material-ui v4，可将React降级至支持的版本：

npm install react@^17.0.0 react-dom@^17.0.0

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