MUI Core 不适用于 React 18（依赖冲突）答案

【问题标题】：MUI Core doesn't work with React 18 (dependency conflict)MUI Core 不适用于 React 18（依赖冲突）
【发布时间】：2022-10-20 19:13:02
【问题描述】：

我正在尝试在 dashboar CoreUI React 中使用 import Box from '@material-ui/core/Box' material ui 框，所以我尝试安装 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: @coreui/coreui-free-react-admin-template@4.4.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!
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 C:\Users\Asus\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Asus\AppData\Local\npm-cache\_logs\2022-09-20T13_48_18_724Z-debug-0.log

这是我的实际包.json：

"dependencies": {
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "^4.2.1",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-react": "^2.1.0",
    "@coreui/react": "^4.3.1",
    "@coreui/react-chartjs": "^2.1.0",
    "@coreui/utils": "^1.3.1",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.6",
    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
},

注意：我已经安装成功

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

导入import Box from '@material-ui/core/Box' 导致错误：

Module not found: Error: Can't resolve '@material-ui/core/Box' in 'C:\Projects React\BPS projects\coreui-free-react-admin-template-main\src'

如何解决？

【问题讨论】：

标签： npm material-ui

【解决方案1】：

也许有比这更好的其他解决方案，但根据this comment on a similar thread on Github，看起来我们不能在 React 18 上使用 MUI 样式，所以我不得不降级到 React 17然后修改index.js文件：

import 'react-app-polyfill/stable'
import 'core-js'
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './store'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

reportWebVitals()

至

import 'react-app-polyfill/stable'
import 'core-js'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'
import reportWebVitals from './reportWebVitals'
import store from './store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
)

reportWebVitals()

【讨论】：