材质 UI、Next12、React 18

Mrk*_*dig 2 npm reactjs material-ui server-side-rendering next.js

我正在尝试尝试最新版本的 NextJS(版本 12),以使我的项目能够访问 SSR ServerComponents 和 Http 流。

MaterialUI 与 Next 12.0.7 和 React 17 配合良好(使用 npx create-next-app@latest 安装)

当我做

npm install react@beta react-dom@beta

然后

npm install @mui/material @mui/styled-engine-sc styled-components --save

给予

(base) marcfielding@MBP meta-ui % npm install @mui/material @mui/styled-engine-sc styled-components --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: meta-ui@undefined
npm ERR! Found: react@18.0.0-rc.0-next-f2a59df48-20211208
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0-beta-24dd07bd2-20211208" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from @mui/material@5.2.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"*" 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 ERR! 
npm ERR! See /Users/marcfielding/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/marcfielding/.npm/_logs/2021-12-09T16_48_20_688Z-debug.log
Run Code Online (Sandbox Code Playgroud)

难道这只是等待 MUI 迎头赶上吗?或者我之前按照此处的说明可以安装一个版本吗?

Sum*_*mer 6

如果您不介意使用纱线,这里有一个存储库,您可以使用您想要的 deps 进行分叉: https: //github.com/MiniDeathStar/material-ui-next12-react-18

如果你想使用 npm,你可以运行:

npm install @mui/material @mui/styled-engine-sc styled-components --legacy-peer-deps
Run Code Online (Sandbox Code Playgroud)

Mui 不应该被 React@18 破坏。我把它们一起用过,效果很好。不过 Npm 是一个挑剔的包管理器,所以只要有机会我就会提倡使用 Yarn 3。