安装@material-ui/core遇React版本依赖冲突问题求助

问题背景 #

当前项目使用 React@18.2.0，尝试安装 @material-ui/core@4.12.4 时触发 ERESOLVE 错误，原因是该版本的 @material-ui/core 仅支持 React ^16.8.0 或 ^17.0.0 作为 peer 依赖，与当前 React 版本不兼容。

报错详情：

home@Avinashs-MacBook-Pro archit-website % npm install @material-ui/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: archit-website@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!   @material-ui/core@"*" 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 /Users/home/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/home/.npm/_logs/2022-07-19T00_13_51_943Z-debug-0.log

解决方法 #

1. 升级到官方兼容 React 18 的 MUI v5（推荐）

@material-ui/core v4 已停止维护，官方推出的 MUI v5（包名改为 @mui/material）完全兼容 React 18，步骤如下：

• 若已安装旧版，先卸载：npm uninstall @material-ui/core
• 安装 MUI v5 核心依赖：npm install @mui/material @emotion/react @emotion/styled
• 如需使用图标库，安装：npm install @mui/icons-material

2. 强制跳过 peer 依赖检查（临时应急，不推荐）

通过参数忽略版本冲突，但可能引发运行时兼容性问题：

• 使用 --legacy-peer-deps：npm install @material-ui/core --legacy-peer-deps
• 或使用 --force：npm install @material-ui/core --force

3. 降级 React 到 17.x 版本

如果不想升级 MUI，可将 React 降级到兼容版本：

• 卸载当前 React 和 ReactDOM：npm uninstall react react-dom
• 安装 React 17.x：npm install react@^17.0.0 react-dom@^17.0.0

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