Material UI 安装不适用于 React 18

Question

我试图用我的 React 18.0 项目安装 Material UI 和图标，但我不能。该项目是使用最新的create-react-app创建的 npm install @material-ui/core @material-ui/icons

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.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.3
npm ERR! node_modules/@material-ui/core
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
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-cache 文件夹并重新安装它仍然不起作用

Answer 1

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

Github 问题： https: //github.com/mui/material-ui/issues/32074

Answer 2

您可以将Materal UI v5用于reactjs 18

https://mui.com/material-ui/getting-started/installation/

或者

让 MUI 与 Reactjs 配合使用的另一种方法是将 React 版本降级到 17。

你只需要把react版本和react-dom版本降级到17就可以了。

检查你的 package.json 文件，你会发现 React 和 React-dom 版本为 18，你必须降级版本才能使 mui v4 与 Reactjs 一起工作。

降级到版本 17 时使用 --force 标志

或者，如果您不想将您的 React 18 降级到 17，请按照以下说明进行操作。

对于react >= 17.0.0 和react-dom >= 17.0.0 使用MUI v5。

如果您使用的 React 版本大于 17，则必须安装 Material UI（版本）v5。

注意：如果无论如何 MUI v5 不能与 React@17.0.x 一起使用，请安装 MUI（版本）v4。

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

和

对于react >= 16.8.0 和react-dom >= 16.8.0，则使用它。

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Answer 3

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

2022年4月24日实际：

• 材料-ui/核心 v4.12.4
• 反应 v18.0.0

Answer 4

安装它npm install @mui/material @emotion/react @emotion/styled --force