如何在@mui v5中移除默认主题样式 替代v4设为undefined的方案

原因说明 #

MUI v4 基于 JSS 实现样式系统，设置属性为 undefined 时会被 JSS 识别为移除该默认属性；但 v5 改用 Emotion/Styled-Components 作为样式引擎，这类库会直接忽略值为 undefined 的样式属性，因此该方案失效。

正确实现方案 #

方案1：使用CSS原生重置值（推荐）

将需要移除的属性值设置为 unset、initial 或者 revert 即可，三个值的适用场景如下：

• unset：属性可继承时取父元素值，否则取浏览器初始值，是最常用的重置选项
• initial：强制使用浏览器对该属性的初始默认值，不继承父元素值
• revert：回退到用户自定义样式表或浏览器默认值，会覆盖主题层定义的所有同属性样式

对应你的场景示例代码如下：

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

const theme = createTheme({
  components: {
    MuiCardHeader: {
      styleOverrides: {
        action: {
          flex: 'unset',
          // 其他自定义样式
        }
      }
    }
  }
});

方案2：完全清空某类的所有默认样式

如果你需要直接移除某个组件子元素的全部内置默认样式，可以将对应子元素的样式覆盖配置设为 null：

const theme = createTheme({
  components: {
    MuiCardHeader: {
      styleOverrides: {
        // 清空action节点的所有默认样式
        action: null
      }
    }
  }
});

局部单组件覆盖方案

如果不需要修改全局主题，只想针对单个组件实例调整，可以直接在组件的 sx 属性中配置：

<CardHeader
  action={/* 你的action内容 */}
  sx={{
    '& .MuiCardHeader-action': {
      flex: 'unset'
    }
  }}
/>

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