MUI主题样式优先级高于sx prop导致自定义样式被覆盖如何解决？

这是MUI的预期行为吗？ #

这属于MUI的预期表现，完全符合CSS优先级规则：你在主题中定义的h1样式绑定了@media媒体查询规则，当视口宽度满足媒体查询条件时，带媒体查询的同属性样式优先级高于sx中未绑定断点的普通样式，所以会出现主题样式覆盖sx样式的情况。

解决方法 #

• 方法1：在sx中针对所有断点配置对应样式，优先级会匹配并覆盖主题的断点规则

<Typography
  variant='h1'
  align='center'
  sx={{ 
    fontSize: { xs: '24px', sm: '24px', md: '24px', lg: '24px' },
    pb: '8px', 
    fontWeight: '700' 
  }}
>
  Admin Panel
</Typography>

MUI的sx属性默认支持内置断点（xs/sm/md/lg/xl）的对象写法，会自动生成对应媒体查询的样式，优先级高于主题默认的断点样式。

• 方法2：使用!important强制提升样式优先级，适合快速调试或临时覆盖场景

sx={{ fontSize: '24px !important', pb: '8px', fontWeight: '700' }}

不推荐大规模使用该方法，会增加后续样式维护的复杂度。

• 方法3：直接修改主题typography配置，如果你需要所有h1变体的文字大小都为24px，直接调整主题配置即可，无需额外在组件内写覆盖样式

typography: {
  h1: {
    fontSize: '24px',
    // 移除原有断点配置，或者根据需求调整各断点值
  },
}

• 方法4：给组件添加自定义类名，通过全局CSS样式覆盖

<Typography
  variant='h1'
  align='center'
  className="custom-admin-title"
  sx={{ pb: '8px', fontWeight: '700' }}
>
  Admin Panel
</Typography>

对应的CSS：

.custom-admin-title {
  font-size: 24px;
}

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