React 18与@mui/styles兼容问题及解决方案咨询

一、保留@mui/styles的永久兼容方案 #

1. 使用npm overrides强制兼容React 18 #

在项目的package.json中添加overrides字段，强制让@mui/styles接受React 18作为合法的peer依赖：

{
  "overrides": {
    "@mui/styles": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  }
}

添加后执行npm install即可正常安装，该方案仅告知npm忽略版本冲突，不会修改依赖包本身，且@mui/styles实际可在React 18环境下正常运行。

2. 使用yarn resolutions（若项目用yarn） #

如果项目使用yarn包管理器，在package.json中添加resolutions字段：

{
  "resolutions": {
    "@mui/styles/react": "^18.2.0",
    "@mui/styles/react-dom": "^18.2.0"
  }
}

之后执行yarn install完成安装。

二、官方推荐的替代方案 #

@mui/styles是MUI 5的遗留样式方案，官方更推荐以下现代化、兼容React 18的方案：

1. 使用MUI内置的styled API #

直接用@mui/material/styles提供的styled函数创建样式组件：

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const StyledButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(2),
  '&:hover': {
    backgroundColor: theme.palette.primary.dark
  }
}));

2. 使用sx prop #

MUI所有组件都支持sx prop，可直接在组件上编写内联样式并访问主题变量：

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button
      sx={{
        bgcolor: 'primary.main',
        p: 2,
        '&:hover': { bgcolor: 'primary.dark' }
      }}
    >
      自定义按钮
    </Button>
  );
}

3. 社区替代：tss-react #

如果习惯makeStyles的写法，可使用社区维护的tss-react，它完全兼容React 18和MUI 5，API与@mui/styles的makeStyles几乎一致：
安装命令：

npm install tss-react @emotion/react @emotion/styled

使用示例：

import { makeStyles } from 'tss-react/mui';

const useStyles = makeStyles()((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    padding: theme.spacing(2),
  },
}));

function MyComponent() {
  const { classes } = useStyles();
  return <div className={classes.root}>自定义容器</div>;
}

内容的提问来源于stack exchange，提问作者Rishav Kumar