logo标签列表

Material UI 的安装在 React 18 中无法正常工作。

reactjsmaterial-ui
74

我正在尝试在我的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文件夹并重新安装了它，但仍然无法正常工作。

2
目前根据错误信息，尚不支持React 18。 - jonrsharpe
2
尝试使用yarn add，同时您是否安装了MUI版本<5。 - maazakn
11个回答
77
4
运行得非常好。--legacy-peer-deps命令背后隐藏着什么？ - dani_l_n
3
--legacy-peer-deps 通过恢复 NPM v4 到 v6 的 peerDependency 安装行为来解决问题。可以这样理解这个标志：它并没有做什么新的事情；相反，它告诉 NPM 不要做一些新的事情，因为 NPM v7 现在默认安装 peerDependencies。 - William Ashford
1
你可以在本地这样做，但在实际环境中会出现问题。 - Wasim
11

你可以在Reactjs 18中使用Material UI v5

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配合使用。

在降级版本时使用--force标志。

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

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

如果你正在使用大于17的React版本，则必须安装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
请参考 MUI 文档 v4 和 v5 此处链接。 - sarfaraj shah
7
npm i @material-ui/core --legacy-peer-deps

2022年04月24日实际情况：

  • material-ui/core v4.12.4
  • react v18.0.0
1
这有什么不同于已经发布的其他答案吗？ - AndreFeijo
5

使用npm install @mui/material @emotion/react @emotion/styled --force进行安装

4
你应该使用React 18的最新版本Material UI。
要安装新版本，请执行以下命令：
// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
4
这是MUI在新版react中遇到的问题。他们正在努力发布一个新版本的Material UI。与此同时，我们可以通过使用--legacy-peer-deps来解决这个问题。
具体方法如下：https://namespaceit.com/blog/mui-installation-doesnt-work-with-react-18 
npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps
3

我使用了--force标志，它对我起作用了。

npm install @material-ui/core

1
1
虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - user16217248
1

@material-ui/core@4.12.3与React 18.x不兼容，并已被弃用。请使用MUI v5

让我们检查MUI v4的对等依赖：

$ npm view @material-ui/core@4.12.3 peerDependencies
{
  '@types/react': '^16.8.6 || ^17.0.0',
  react: '^16.8.0 || ^17.0.0',
  'react-dom': '^16.8.0 || ^17.0.0'
}

如您所见，MUI v4 与 React ^16.8.0 或 React ^17.0.0 兼容。但在您的项目中，React 版本是 ^18.0.0，这是不兼容的。
相关问题： MUI v5.6.0 开始支持 React 18，最新版本为 5.13.6（截至2023年7月4日）。因此，您可以安装最新版本。
1

@material-ui/core在React 18中无法使用。

相反，您可以使用@mui/material

例如，您可以在React 18中转换您的包名称。

import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import SendIcon from '@material-ui/icons/Send';

至

import { makeStyles } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import SendIcon from '@mui/icons-material/Send';

在React 18环境中运行良好。不要使用--legacy-peer-deps。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接