React与Material-UI(Mui)依赖版本冲突问题求助

问题重现 #

执行npm i安装依赖时出现以下报错：

1:48:24 PM: "安装依赖"阶段失败：dependency_installation脚本返回非零退出码：1
1:48:24 PM: npm ERR! code ERESOLVE
1:48:24 PM: npm ERR! ERESOLVE 无法解析依赖
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! 解析时出错：@mui/styles@5.15.1
1:48:24 PM: npm ERR! 已找到：react@18.2.0
1:48:24 PM: npm ERR! node_modules/react
1:48:24 PM: npm ERR!   react@"^18.2.0" 来自根项目
1:48:24 PM: npm ERR!   peer react@">=16.8.0" 来自 @emotion/react@11.11.3
1:48:24 PM: npm ERR!   node_modules/@emotion/react
1:48:24 PM: npm ERR!     @emotion/react@"^11.11.1" 来自根项目
1:48:24 PM: npm ERR!     peer @emotion/react@"^11.0.0-rc.0" 来自 @emotion/styled@11.11.0
1:48:24 PM: npm ERR!     node_modules/@emotion/styled
1:48:24 PM: npm ERR!       @emotion/styled@"^11.11.0" 来自根项目
1:48:24 PM: npm ERR!       另有3处依赖（@mui/material、@mui/styled-engine、@mui/system）
1:48:24 PM: npm ERR!     另有3处依赖（@mui/material、@mui/styled-engine、@mui/system）
1:48:24 PM: npm ERR!   另有18处依赖（@emotion/styled等）
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! 无法解析依赖：
1:48:24 PM: npm ERR! @mui/styles@5.15.1 要求对等依赖 react@"^17.0.0"
1:48:24 PM: npm ERR! node_modules/@mui/styles
1:48:24 PM: npm ERR!   @mui/styles@"^5.15.1" 来自根项目
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! 对等依赖冲突：react@17.0.2
1:48:24 PM: npm ERR! node_modules/react
1:48:24 PM: npm ERR!   作为@mui/styles@5.15.1的对等依赖要求react@"^17.0.0"
1:48:24 PM: npm ERR!   node_modules/@mui/styles
1:48:24 PM: npm ERR!     @mui/styles@"^5.15.1" 来自根项目
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! 请修复上游依赖冲突，或使用--force或--legacy-peer-deps参数重试命令
1:48:24 PM: npm ERR! 以接受不正确（且可能存在问题）的依赖解析结果。

冲突原因 #

@mui/styles@5.15.1的对等依赖明确要求React版本为^17.0.0，但当前项目使用的是React 18.2.0，版本不匹配导致npm依赖解析失败。

正确版本搭配方案 #

方案一：升级@mui/styles到兼容React 18的版本 #

@mui/styles从5.15.2版本开始正式支持React 18，修改项目package.json中@mui/styles的版本为^5.15.2或更高，然后执行：

npm install

或者直接通过命令升级：

npm install @mui/styles@^5.15.2 --save

方案二：降级React到17.x版本 #

如果需要保留@mui/styles@5.15.1，可将React及react-dom降级到17.0.2版本，修改package.json中对应的依赖：

{
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

然后执行：

npm install

方案三：临时绕过依赖检查（不推荐） #

若需快速部署，可使用npm参数强制跳过对等依赖检查，但可能引发运行时潜在问题：

npm install --legacy-peer-deps
# 或
npm install --force

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