升级@mui/styles@5.13.2遇React版本冲突问题求助

为什么会出现这个矛盾？ #

@mui/styles 是MUI的遗留样式方案，虽然官方文档标注支持React18，但它的package.json里的peer依赖配置没及时更新，还停留在React17的范围。这个报错只是包管理器的peer依赖警告，不是致命错误，你的项目其实可以正常运行。

不过要注意，@mui/styles已经不再是官方推荐的样式方案，官方现在更建议使用@mui/material内置的样式方案。

解决办法 #

方案1：忽略警告继续使用 #

如果不想改动现有代码，可以在安装依赖时跳过peer依赖检查：

• 使用npm：npm install --legacy-peer-deps
• 使用yarn：yarn install --ignore-peer-deps

方案2：迁移到官方推荐的样式方案 #

因为@mui/styles属于遗留包，后续可能不再维护，建议迁移到更适配React18的方案：

• 用@mui/material/styles里的styled函数替代makeStyles/useStyles：
  比如原来的代码：

  import { makeStyles } from '@mui/styles';
  
  const useStyles = makeStyles({
    root: {
      padding: 16,
    },
  });
  
  function MyComponent() {
    const classes = useStyles();
    return <div className={classes.root}>Hello</div>;
  }
  

  改成：

  import { styled } from '@mui/material/styles';
  
  const StyledDiv = styled('div')({
    padding: 16,
  });
  
  function MyComponent() {
    return <StyledDiv>Hello</StyledDiv>;
  }
  

• 或者直接使用MUI组件的sx prop，快速内联样式：

  function MyComponent() {
    return <div sx={{ padding: 16 }}>Hello</div>;
  }
  

内容的提问来源于stack exchange，提问作者Scott Baker