Material UI 安装和 React v. 18.2 有问题答案

【问题标题】：Having problems with Material UI installations and React v. 18.2Material UI 安装和 React v. 18.2 有问题
【发布时间】：2023-01-25 03:20:10
【问题描述】：

我正在尝试使用 Material UI 进行试验，但遇到了 React v.18.2 的问题。我需要导入以下内容：

import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'

但是当我运行npm install @material-ui/styles时，我得到这个错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: zscratch@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/styles@4.11.5
npm ERR! node_modules/@material-ui/styles
npm ERR!   @material-ui/styles@"*" 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.

我试过运行以下命令，per this SO answer，他们确实安装了，但没有任何帮助：

npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
npm install @mui/icons-material@latest

这是我的依赖项。

  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-geolocated": "^4.0.3",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

底线：我需要做什么才能导入我需要的东西？

【问题讨论】：

标签： reactjs npm material-ui

【解决方案1】：

你可以试试纱.

yarn add @material-ui/styles

您也可以使用 --力量.

npm i -f @material-ui/styles

它对我有用

【讨论】：

在 npm 上执行强制工作。谢谢！

【解决方案2】：

试试这些 React 18 MUI 更新命令

npm i @material-ui/core --legacy-peer-deps
npm i @mui/icons-material --legacy-peer-deps
npm i @mui/lab --legacy-peer-deps
npm i @mui/x-data-grid --legacy-peer-deps
npm i @mui/x-data-grid-generator --legacy-peer-deps

【讨论】：