React 18安装@material-ui/core@4.12.4遇依赖冲突问题咨询

问题 #

我按以下步骤创建React项目：
npm init -y
npm install react react-dom
之后尝试安装Material UI：
npm install @material-ui/core
但出现了如下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-sidebar@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!
npm ERR! For a full report see:
npm ERR! /.npm/_logs/2023-10-17T20_20_42_394Z-eresolve-report.txt

我不理解这个错误的含义，用--force成功安装了Material UI，但不清楚问题根源。我觉得本来不该有这个错误，也不想用--legacy-peer-deps。查官方文档显示react >= 16.8.0 and react-dom >= 16.8.0是peer dependencies，我的React版本是18却还是没法正常安装。

问题根源与解决方案 #

错误原因 #

你安装的@material-ui/core@4.12.4是Material UI的旧版本（MUI v4），它的peerDependencies声明里仅明确支持React 16.8.0至17.x版本。尽管React 18理论上向下兼容，但npm v7及以上版本启用了严格的peer依赖检查机制，会将这种版本范围不匹配判定为依赖冲突，因此抛出ERESOLVE错误。

你看到的react >=16.8.0其实是MUI v5的依赖要求，这里混淆了版本分支：

• MUI v4的包名为@material-ui/core
• MUI v5已将包名改为@mui/material，且明确兼容React 18

正确解决方法 #

如果要使用支持React 18的Material UI，应安装MUI v5稳定版，执行命令：

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

该版本完全适配React 18，无需使用--force或--legacy-peer-deps即可正常安装。

若坚持使用MUI v4，只能通过--legacy-peer-deps跳过严格的peer依赖检查，或降级React版本至17.x。但更推荐升级到MUI v5，因为v4已进入维护阶段，不再提供新功能更新。

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