React 18环境下无法安装@mui/styles及@material-ui/core的问题

问题根源 #

@mui/styles 是MUI 5中为兼容MUI 4的makeStyles保留的包，但它内部依赖的@material-ui/core@4.x对React的peer依赖要求是^16.8.0 || ^17.0.0，和你当前的React 18版本不匹配，导致安装时出现ERESOLVE冲突。

解决方案 #

1. 改用MUI 5官方推荐的样式方案（最推荐）

MUI 5官方已不再推荐makeStyles，建议使用以下两种更适配的方案：

• sx prop：直接在MUI组件上通过sx prop定义样式，支持响应式和主题变量

  import { Button } from '@mui/material';
  
  function MyComponent() {
    return (
      <Button sx={{ backgroundColor: 'primary.main', padding: '10px 20px', borderRadius: 2 }}>
        点击按钮
      </Button>
    );
  }
  

• styled方法：使用@mui/material/styles中的styled创建自定义样式组件

  import { styled } from '@mui/material/styles';
  import Button from '@mui/material/Button';
  
  const StyledButton = styled(Button)(({ theme }) => ({
    backgroundColor: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
    },
    borderRadius: theme.shape.borderRadius * 2,
  }));
  
  function MyComponent() {
    return <StyledButton>自定义按钮</StyledButton>;
  }
  

2. 强制安装@mui/styles（临时过渡方案）

如果必须继续使用makeStyles，可以通过忽略peer依赖冲突完成安装：

• npm命令：

  npm install @mui/styles --legacy-peer-deps
  

• yarn命令：

  yarn add @mui/styles --legacy-peer-deps
  

注意：这种方式可能引发潜在兼容性问题（如样式渲染异常），仅建议作为短期过渡使用。

3. 使用第三方库tss-react替代（兼容React 18）

tss-react语法和makeStyles几乎一致，完全适配React 18和MUI 5：

1. 安装依赖：

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

2. 使用示例：

   import { makeStyles } from 'tss-react/mui';
   
   const useStyles = makeStyles()((theme) => ({
     container: {
       padding: theme.spacing(3),
       backgroundColor: theme.palette.background.paper,
       boxShadow: theme.shadows[2],
     },
   }));
   
   function MyComponent() {
     const { classes } = useStyles();
     return <div className={classes.container}>内容容器</div>;
   }
   

内容的提问来源于stack exchange，提问作者Samia Rahman