如何让自定义MUI组件默认样式可被父级ThemeProvider覆盖

问题本质 #

组件内写死的样式优先级高于主题样式，核心原因是样式注入顺序错误：直接在组件JSX中写死sx、行内style，或者未做优先级配置的styled样式，会被MUI放在样式表末尾注入，同CSS权重下后注入的样式生效，导致内置样式无法被父级ThemeProvider配置覆盖。

实现方案 #

方案1：嵌套默认主题配置（官方推荐，适配性最好） #

将组件内置默认样式封装为内层ThemeProvider配置，利用MUI主题的深度合并规则——外层ThemeProvider传入的配置优先级更高，自动覆盖内层默认样式，无需手动判断样式优先级。
代码示例：

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

// 组件内置默认主题：默认按钮为绿色
const innerDefaultTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: 'green',
          color: '#fff',
          '&:hover': {
            backgroundColor: 'darkgreen'
          }
        }
      }
    }
  }
});

// 自定义Button组件
const CustomButton = (props) => {
  return (
    <ThemeProvider theme={innerDefaultTheme}>
      <Button {...props} />
    </ThemeProvider>
  );
};

// 业务侧使用：父级主题配置自动覆盖默认绿色
const appTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          // 该配置生效，按钮最终显示为蓝色
          backgroundColor: 'blue',
          '&:hover': {
            backgroundColor: 'darkblue'
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={appTheme}>
      <CustomButton>测试按钮</CustomButton>
    </ThemeProvider>
  );
}

方案2：配置styled组件的主题识别参数 #

如果不想额外嵌套ThemeProvider，在使用styled创建自定义组件时，添加官方要求的组件标识配置，让MUI识别该组件支持主题样式覆盖，此时主题传入的styleOverrides、用户传入的sx属性样式优先级会高于内置默认样式。
代码示例：

import { styled, Button } from '@mui/material';

const CustomButton = styled(Button, {
  name: 'MuiButton', // 绑定主题对应的组件名
  slot: 'Root', // 绑定对应样式插槽
  overridesResolver: (props, styles) => styles.root // 配置样式覆盖解析规则
})(() => ({
  // 内置默认绿色样式，可被主题覆盖
  backgroundColor: 'green',
  color: '#fff',
  '&:hover': {
    backgroundColor: 'darkgreen'
  }
}));

方案3：手动控制sx属性合并顺序 #

如果是轻量自定义，不需要支持全局主题的styleOverrides，仅需要支持用户传入的sx属性覆盖默认样式，可以将用户传入的sx配置放在默认样式之后合并，利用对象属性覆盖的规则实现优先级控制。
注意：不要直接在组件上写死sx后透传props，会导致默认样式直接被替换、丢失基础样式。

// ✅ 正确写法
const CustomButton = (props) => {
  const { sx: userSx, ...rest } = props;
  return (
    <Button
      {...rest}
      sx={{
        // 内置默认样式
        backgroundColor: 'green',
        color: '#fff',
        '&:hover': {
          backgroundColor: 'darkgreen'
        },
        // 用户传入的sx放在后面，同属性覆盖默认值
        ...userSx
      }}
    />
  );
};

避坑要点 #

• 不要给内置默认样式加!important标记，会彻底破坏主题覆盖逻辑
• 不要直接在组件根节点写行内style属性，行内样式优先级高于所有class类样式，无法被主题配置覆盖
• 优先选择方案1或方案2，符合MUI的组件设计规范，不会出现样式优先级异常

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