React 依赖冲突版本 18.0 与 Material-UI

Question

我已经尝试了这里的所有建议，但没有奏效。 Issue with Material UI Icons npm installation : unable to resolve dependency tree 也不是下面这个：请问有什么办法可以解决这个问题？下面是我的 package.lock.json.

     "name": "cashflowbr",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cashflowbr",
      "version": "0.1.0",
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@fontsource/roboto": "^4.5.5",
        "@mui/icons-material": "^5.6.2",
        "@mui/material": "^5.6.2",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }

Answer 1

我似乎在安装 MUI 版本 5 时试图导入 MUI 版本 4 组件。

您的导入应该来自 @mui/material（版本 5）而不是来自 @material-ui/core（版本 4）。

选项 1

更改导入以使用已安装的库 (@mui/material)，例如：

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

选项 2

更改 package.json 以安装 MUIv4。

删除：

"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
...
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2",

...并添加：

"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.3",

最后，运行npm install。删除您的 node_modules 文件夹，然后删除 npm install 如果之后有任何问题。

React 依赖冲突版本 18.0 与 Material-UI

React Dependency Conflict Version 18.0 with Material-UI

installation-package

reactjs

material-ui

选项 1

选项 2