Material UI 安装不适用于 React 18



我试图在React 18.0项目中安装Material UI和图标,但我做不到。该项目是使用最新的create-react应用程序创建的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缓存文件夹并重新安装仍然不起作用

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

Github问题:https://github.com/mui/material-ui/issues/32074

您可以使用Matral UI v5用于reactjs18

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一起工作。

降级到版本17 时使用-强制标志

或如果你不想降低你的反应18到17,那么按照下面的说明进行。

对于react>=17.0.0并且反应dom>=17.0.0使用MUI v5。

如果您使用的react版本大于17,则必须安装Material UI(版本(v5。

注意:如果MUI v5无论如何都不能与react@17.0.x然后安装MUI(版本(v4。

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

对于react>=16.8.0并且反应dom>=16.8.0然后使用这个。

// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
npm i @material-ui/core --legacy-peer-deps

2022.04.24:实际

  • 材料ui/core v4.12.4
  • react v18.0.0

npm install @mui/material @emotion/react @emotion/styled --force安装

这是MUI在新版react中的问题。他们正在努力发布新版本的Material UI。同时,我们可以通过使用遗留对等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

您应该使用带有react 18 的新版本材料UI

使用以下命令安装新版本:

// with npm
npm install @mui/material @emotion/react @emotion/styled
// with yarn
yarn add @mui/material @emotion/react @emotion/styled

我使用了--force标志,它对我的有效

npm install @material-ui/core

使用此链接:https://mui.com/material-ui/getting-started/installation/查找react 18的材质UI版本安装:npm install@mui/material@memotional/areact@memotional/styled

@材料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.0React ^17.0.0配合使用。但在您的项目中,React版本是^18.0.0,这是不兼容的。

相关问题:

  • https://github.com/mui/material-ui/issues/33216
  • [core]更新对等deps以支持React 18

MUI v5.6.0开始支持React 18,最新版本为5.13.6(至2023.7.4(。因此您可以安装最新版本。

最新更新