Next.js项目中Emotion(MUI)内联样式仅Chrome v129不生效求解决方案

问题现象 #

• Emotion为MUI组件生成的内联样式类，仅在Chrome v129中无法被应用；Chrome ≤v128、Safari、Firefox、Brave等浏览器均正常显示样式
• 异常场景下，svg、fieldset等HTML元素上的emotion类未在浏览器样式面板中加载，导致样式完全失效；正常场景下类名与对应样式匹配且生效

环境信息 #

• 技术栈：Next.js v13，MUI v5.14
• 系统：macOS Sequoia v15.0

可行解决方案 #

1. 升级Emotion依赖
   Chrome v129的CSS引擎可能存在兼容性变化，升级Emotion核心依赖大概率能修复该问题：

   npm update @emotion/react @emotion/styled
   # 或使用yarn
   yarn upgrade @emotion/react @emotion/styled
   

2. 禁用Chrome实验性Web特性
   若暂时无法升级依赖，可尝试关闭Chrome的Experimental Web Platform features：

   • 打开Chrome地址栏输入chrome://flags/#enable-experimental-web-platform-features
   • 将选项设置为Disabled，重启浏览器后测试

3. 切换MUI样式引擎
   临时切换到styled-components作为MUI的样式引擎，绕过Emotion的兼容性问题：
   在layout.js或_app.js中配置：

   import { ThemeProvider, createTheme } from '@mui/material/styles';
   import StyledEngineProvider from '@mui/material/StyledEngineProvider';
   
   export default function RootLayout({ children }) {
     const theme = createTheme();
     return (
       <html lang="en">
         <body>
           <StyledEngineProvider injectFirst>
             <ThemeProvider theme={theme}>
               {children}
             </ThemeProvider>
           </StyledEngineProvider>
         </body>
       </html>
     );
   }
   

   同时安装依赖：

   npm install styled-components
   # 或yarn
   yarn add styled-components
   

4. 临时使用内联样式
   对受影响的组件，直接用内联样式替代Emotion生成的类作为临时方案：

   <svg style={{ width: 24, height: 24, color: '#1976d2' }} />
   

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