MUI5主题中如何覆盖组件样式？升级后styleOverrides配置不生效

问题排查&修复步骤 #

• 检查createTheme、ThemeProvider的导入路径，必须从@mui/material/styles导入，不可使用@mui/styles包里的同名API，该兼容包不支持styleOverrides配置项。
  正确导入示例：

  import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
  

• 检查依赖完整性，确保已安装MUI5必须的样式引擎依赖：

  npm install @mui/material @emotion/react @emotion/styled
  # 若仍在使用JSS相关API（makeStyles/withStyles等），需额外安装兼容包
  npm install @mui/styles
  

• 若需要针对特定组件变体覆盖样式，可补充对应变体的样式配置，以Typography的h2变体为例：

  createTheme({
    typography: {
      h2: {
        fontSize: '16px',
        fontWeight: 700
      }
    },
    components: {
      MuiTypography: {
        defaultProps: {
          title: 'test h2 title',
        },
        styleOverrides: {
          root: {
            fontSize: '10px',
            fontWeight: 500,
          },
          // 单独覆盖h2变体的优先级高于root配置
          h2: {
            fontSize: '18px'
          }
        },
      },
    },
  });
  

• 排查是否存在全局样式重置、组件内联样式、sx属性、自定义className的优先级高于主题样式的情况，injectFirst属性仅保证JSS样式注入顺序早于emotion默认样式，若自定义样式优先级更高仍会覆盖主题配置。
• 检查主题合并逻辑，若使用了deepmerge等工具自定义合并多份主题配置，需确认components字段未被覆盖或丢失。

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