@mui/styles 的 NPM 安装不适用于 React 18

Question

我正在尝试将 Material-UI Styles 安装到 React 项目，但是每当我在终端中运行此命令时：

npm i @mui/styles

它读取以下消息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project

这是 React 中的代码：

import { HeadsetTwoTone } from "@mui/icons-material";
import { AppBar, Toolbar, Typography } from "@mui/material";
import React from "react";
import { makeStyles } from "@mui/styles"

const useStyles = makeStyles(theme => ({
    title: {
        marginLeft: theme.spacing(2)
    }
}))

const Header = () => {
    const classes = useStyles();

    return (
        <AppBar color="secondary" position="fixed">
            <Toolbar>
                <HeadsetTwoTone />
                <Typography className={classes.title} variant="h6" component="h1">
                    Apollo Music Share
                </Typography>
            </Toolbar>
        </AppBar>
    )
}

export default Header;

不幸的是，该代码不起作用，因为该包不存在并且无法安装。我在网上搜索了解决方案，但目前似乎没有任何效果。

有人知道如何进行吗？

非常感谢！

Answer 1

npm i @mui/styles --force

它需要不同版本的 React，但实际上使用 React 18 就可以了（从未实际测试过它，但根据我对其他有类似问题的软件包的经验来看）

Answer 2

Material UI (MUI) 不适用于 React 18。

你必须将你的 React 降级到 17。

要将 React 降级到 17，请运行

npm install --save [email protected]

和

npm install --save [email protected]

这将完美地发挥作用！

Answer 3

@mui/styles 与 React.StrictMode 或 React 18 不兼容

所以现在，您有两个选择：

1. 使用

   @mui/system

   -

   sx

   道具进行造型 (https://mui.com/system/getting-started/overview/)
2. 使用

   --force

   或

   --legacy-peer-deps

重试此命令

Answer 4

尝试使用以下命令：

npm i @mui/styles --save --force

截图：

Answer 5

    import { HeadsetTwoTone } from "@mui/icons-material";
import { AppBar, Toolbar, Typography } from "@mui/material";
import React from "react";

const Header = () => {
  return (
    <AppBar sx={{ color: "secondary", position: "fixed" }}>
      <Toolbar>
        <HeadsetTwoTone />
        <Typography sx={{ marginLeft: 2 }} variant="h6" component="h1">
          Apollo Music Share
        </Typography>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

您可以使用 sx 函数进行相同的操作