Vite项目中使用MUI Grid2报错：styled_default is not a function

问题分析 #

从你的package.json可见，项目同时安装了@emotion/styled、styled-components以及@mui/styled-engine-sc，这会引发MUI样式引擎冲突——Grid2依赖的styled函数在Vite的ESM模块解析规则下无法正确加载，最终抛出styled_default is not a function错误。

解决方案 #

方案一：切换回MUI默认的Emotion引擎（推荐） #

1. 卸载冲突的样式引擎相关包：

   yarn remove @mui/styled-engine-sc styled-components
   

2. 重新安装依赖：

   yarn install
   

3. 重启Vite开发服务器即可。

方案二：保留styled-components并配置Vite别名 #

若需继续使用styled-components，需在Vite中配置别名，确保MUI加载正确的样式引擎：

1. 修改vite.config.ts，添加resolve.alias配置：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@mui/styled-engine': '@mui/styled-engine-sc',
       },
     },
   });
   

2. 清除Vite缓存并重启服务：

   rm -rf node_modules/.vite
   yarn dev
   

额外建议 #

若上述方案无效，尝试升级MUI及相关依赖到最新版本，修复可能存在的Vite兼容性问题：

yarn upgrade @mui/material @mui/icons-material @emotion/react @emotion/styled

你的Grid2导入语句import Grid from '@mui/material/Unstable_Grid2';及使用方式均无问题，无需修改。

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