mui/styles与Next.js 13版本冲突致Netlify/Vercel构建失败求解决方案

1. 升级样式依赖到兼容React 18的版本 #

@mui/styles 是MUI v4的遗留方案，已停止维护且不兼容React 18；你当前使用的旧版emotion/styled、emotion/react也存在版本限制。直接替换为MUI v5官方推荐的兼容依赖：

• 卸载旧依赖：

  npm uninstall @mui/styles @emotion/styled @emotion/react
  

• 安装兼容版本：

  npm install @mui/material @emotion/react @emotion/styled
  

  这套依赖完全适配React 18和Next.js 13，不存在版本冲突。

2. 迁移代码中的样式写法 #

将原@mui/styles的用法替换为MUI v5的标准写法：

• 替换makeStyles/useStyles：改用styled组件或sx属性
  旧写法（@mui/styles）：

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

  新写法（@mui/material + @emotion/styled）：

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

  或更简洁的sx属性写法：

  import Box from '@mui/material/Box';
  
  function MyComponent() {
    return <Box sx={{ padding: 16, backgroundColor: '#f0f0f0' }}>Hello</Box>;
  }
  

• 替换withStyles高阶组件：改用styled组件或MUI v5的styled HOC。

3. 清理依赖并重新安装 #

彻底清理旧依赖残留，确保依赖树无冲突：

rm -rf node_modules package-lock.json
npm install

此时无需加-f参数，依赖版本已完全兼容。

4. 部署平台过渡配置（可选） #

如果暂时无法完成代码迁移，可在项目根目录添加.npmrc文件跳过peer依赖校验（仅作为临时方案）：

legacy-peer-deps=true

或修改package.json中的安装脚本：

{
  "scripts": {
    "install": "npm install --legacy-peer-deps"
  }
}

注意：该方案只是临时规避问题，长期来看升级依赖才是根本解决办法。

为什么本地-f能安装但部署失败？ #

本地-f（--force）会强制忽略peer依赖冲突，但Netlify、Vercel等部署平台默认严格校验依赖树，确保项目依赖无版本矛盾，因此会触发构建失败。

内容的提问来源于stack exchange，提问作者Krishna Kant