在反应中安装材料ui时出错答案

【问题标题】：Error when installing material ui in react在反应中安装材料ui时出错
【发布时间】：2022-12-30 16:20:27
【问题描述】：

我正在尝试使用 material ui core，但是在 react 和 typescript 应用程序中使用 npm 安装它时出现错误。我在项目根目录中使用的命令是： npm install @mui/material @emotion/react @emotion/styled

Material UI website

我得到的错误是：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @mui/core@5.0.0-alpha.54
npm ERR! Found: @types/react@18.0.15
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/base@5.0.0-alpha.95
npm ERR!   node_modules/@mui/base
npm ERR!     @mui/base@"5.0.0-alpha.95" from @mui/material@5.10.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.10.3" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/icons-material@5.10.3
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"^5.10.3" from the root project
npm ERR!   9 more (@mui/private-theming, @mui/system, @mui/types, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @mui/core@5.0.0-alpha.54
npm ERR! node_modules/@mui/core
npm ERR!   @mui/core@"^5.0.0-alpha.54" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @types/react@17.0.49
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^16.8.6 || ^17.0.0" from @mui/core@5.0.0-alpha.54
npm ERR!   node_modules/@mui/core
npm ERR!     @mui/core@"^5.0.0-alpha.54" 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/username/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2022-09--debug-0.log
user@User'sPC projectName % npm install @mui/material @emotion/react @emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @mui/core@5.0.0-alpha.54
npm ERR! Found: @types/react@18.0.15
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/base@5.0.0-alpha.95
npm ERR!   node_modules/@mui/base
npm ERR!     @mui/base@"5.0.0-alpha.95" from @mui/material@5.10.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.10.3" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/icons-material@5.10.3
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"^5.10.3" from the root project
npm ERR!   9 more (@mui/private-theming, @mui/system, @mui/types, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @mui/core@5.0.0-alpha.54
npm ERR! node_modules/@mui/core
npm ERR!   @mui/core@"^5.0.0-alpha.54" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @types/react@17.0.49
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^16.8.6 || ^17.0.0" from @mui/core@5.0.0-alpha.54
npm ERR!   node_modules/@mui/core
npm ERR!     @mui/core@"^5.0.0-alpha.54" 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/username/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2022-09-debug-0.log

我的相关 package.json 是：

"dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.3",
    "@mui/styled-engine-sc": "^5.10.3",
},

我删除了@mui/core dependency，然后按照评论中的答案尝试了命令：npm i --save @mui/core，但是我收到以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving:projectname@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@"^17.0.2" from @mui/core@5.0.0-alpha.54
npm ERR! node_modules/@mui/core
npm ERR!   @mui/core@"^5.0.0-alpha.54" 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/username/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2022-09--debug-0.log

我不知道这个错误是什么意思所以非常感谢任何帮助谢谢！

【问题讨论】：

请也出示您的package.json。我怀疑你那里有一个不兼容的@mui/core版本。
@AKX 当然，我刚刚在问题的末尾对其进行了编辑。谢谢
试试 npm install @mui/material @emotion/react @emotion/styled
@特拉维斯好的。删除 @mui/core 依赖项，然后使用 npm i --save @mui/core 安装它的兼容非 alpha 版本。
@AKX 谢谢，我试过了，但没有用:(我编辑了问题末尾的错误，因为它不适合这里。

标签： reactjs material-ui

【解决方案1】：

运行这些命令

npm 配置设置 legacy-peer-deps true
npm i --save @mui/core
npm 我@mui/样式

【讨论】：