如何在react@16.12项目中安装MUI5？peer依赖警告如何解决？

我在使用react@16.12的项目中安装MUI5，已经在package.json里配置了peerDependencies，但执行npm install后依然收到peer依赖警告。

我的package.json配置如下：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "peerDependencies": {
    "react": "^17.0.0",
    "@babel/core": "^7.13.0",
    "react-dom": "^17.0.0",
    "typescript": "3.2.0-dev",
    "fsevents": "1.2.13"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.8",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

执行npm install后收到的警告：

WARN @mui/material@5.11.8 requires a peer of react@^17.0.0 || ^18.0.0 but none is installed. You must install peer dependencies yourself.

我的疑问：

1. 手动安装peer依赖具体指什么？我已在package.json中添加配置，当前项目使用react16.12该如何处理？
2. 我不想使用MUI4，是否有其他方法让react@16.12与Material UI5兼容？

针对第一个问题 #

• 手动安装peer依赖指的是直接将依赖包安装到项目的dependencies或devDependencies中，而非仅在peerDependencies里声明。peerDependencies的作用是告知包管理器：当前包需要依赖特定版本的其他包，但这些依赖应由宿主项目提供，而非自身安装。
• 你当前的问题在于：peerDependencies中声明的react版本是^17.0.0，但实际安装的是16.12.0，版本不匹配导致警告持续存在。如果要保留react@16.12，需将peerDependencies里的react和react-dom版本修改为与实际安装一致的^16.12.0，这样包管理器就不会再因版本不匹配抛出警告。不过需注意，这仅能消除警告，不代表MUI5能在React16环境下正常运行。

针对第二个问题 #

MUI5（v5.0起）的核心依赖@emotion/react和@emotion/styled最低要求react@16.8.0，但@mui/material官方明确要求react@^17.0.0 || ^18.0.0。不过有开发者测试发现，通过调整依赖版本，MUI5的部分组件可在react@16.12下运行，具体操作如下：

1. 锁定@emotion/react和@emotion/styled为支持React16的最高兼容版，比如@emotion/react@11.1.5和@emotion/styled@11.1.5（这两个版本明确支持React16.8+）。
2. 在package.json中添加版本强制字段：
   • 若使用npm 8+，添加overrides：

     "overrides": {
       "@mui/material": {
         "react": "^16.12.0",
         "react-dom": "^16.12.0"
       },
       "@emotion/react": {
         "react": "^16.12.0"
       }
     }
     

   • 若使用yarn，添加resolutions：

     "resolutions": {
       "@mui/material/react": "^16.12.0",
       "@mui/material/react-dom": "^16.12.0",
       "@emotion/react/react": "^16.12.0"
     }
     

3. 重新执行npm install或yarn install安装依赖。

需注意：这种方式属于非官方兼容方案，可能会出现部分组件功能异常、生命周期兼容问题，后续版本更新也可能导致兼容断裂，生产环境使用需全面测试。

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