通过react-router-dom跳转后Material UI按钮样式丢失问题

核心原因 #

该问题属于MUI CSS-in-JS样式注入和客户端路由渲染顺序的常见冲突：刷新页面时所有样式按固定顺序加载渲染，样式优先级正常；通过react-router跳转时，路由组件动态加载导致样式注入顺序变化、或者MUI主题上下文意外重初始化，最终按钮样式被覆盖或丢失。

修复方案 #

• 调整MUI样式注入优先级（MUI v5及以上版本适用）
  在根组件外层包裹StyledEngineProvider，固定MUI样式的注入顺序，避免动态加载的路由样式覆盖MUI默认样式：

import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { BrowserRouter } from 'react-router-dom';

const theme = createTheme();

ReactDOM.createRoot(document.getElementById('root')).render(
  {/* 开启injectFirst时MUI样式优先注入，适合需要自定义样式覆盖MUI的场景；去掉该属性时MUI样式注入到head末尾，默认优先级更高 */}
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </StyledEngineProvider>
);

如果使用MUI v4版本，可通过配置jss的insertionPoint参数固定样式注入顺序。

• 修正ThemeProvider嵌套层级
  不要将ThemeProvider放在单个路由组件、路由出口Outlet内部，必须放在BrowserRouter外层或全局父层级，保证路由跳转时主题上下文不会重新挂载，避免MUI类名异常丢失。
• 修复打包配置异常
  如果项目开启了路由按需拆包，检查webpack/vite配置，将MUI相关依赖打包为单独的公共chunk，避免路由跳转时重复加载MUI样式文件导致样式覆盖。

排查技巧 #

在浏览器开发者工具的元素面板查看异常按钮的样式规则：如果MUI生成的类名完全消失，属于ThemeProvider重挂载问题；如果MUI样式规则被划横线（优先级低于其他样式），属于样式注入顺序问题。

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