MUI v4迁移v5时overrides行为不一致问题咨询

问题原因 #

MUI v5 重构了主题样式系统，overrides 作为兼容保留的配置项，其匹配逻辑与 v4 完全不同：

• v4 中，overrides.MuiButton.root 仅作用于未指定 color 属性的默认按钮变体，带 primary/secondary 等属性的按钮会使用独立的样式优先级，不会被覆盖。
• v5 中，overrides（或推荐的 components.styleOverrides）的 root 样式会全局作用于所有 Button 组件的根元素，无论是否指定 color 属性，导致所有按钮被统一覆盖。

解决方案 #

1. 改用 v5 推荐的 components 配置，通过 ownerState 精准匹配 #

利用组件的 ownerState 获取当前按钮的 color 属性，仅对默认变体（color="inherit"，未指定 color 时的默认值）应用样式：

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.color === 'inherit' && {
            backgroundColor: 'gray',
            // 其他你需要的默认按钮样式
          }),
        }),
      },
    },
  },
});

2. 使用 CSS 选择器排除指定变体 #

通过类名选择器，跳过带 primary/secondary 等属性的按钮，仅覆盖默认按钮：

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          '&:not(.MuiButton-primary):not(.MuiButton-secondary)': {
            backgroundColor: 'gray',
          },
        },
      },
    },
  },
});

3. 定义自定义默认变体（可选） #

如果需要更清晰的变体区分，可以在主题中定义自定义默认变体，替代原有的默认样式：

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { color: 'inherit' }, // 匹配未指定color的按钮
          style: {
            backgroundColor: 'gray',
          },
        },
      ],
    },
  },
});

注意事项 #

• 尽量避免继续使用 v5 中的 overrides 配置，官方推荐使用 components.styleOverrides 和 components.variants 来实现组件样式定制，这也是 v5 样式系统的标准用法。
• 若必须保留 overrides，同样可以在 root 样式中加入上述的条件判断或选择器，实现与 v4 一致的效果。

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