MUI v5自定义主题时如何覆盖AppBar及其子组件的颜色

转换后的完整v5兼容主题代码如下 #

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

export const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#ff3d00',
    },
    secondary: {
      main: '#2962ff',
    },
    // 其余palette配置保持即可
  },
  components: {
    MuiAppBar: {
      // 对应v4的props字段，用于设置组件全局默认属性
      defaultProps: {
        color: 'inherit',
      },
      styleOverrides: {
        // 对应v4的overrides字段，和v4的类名保持一致即可
        colorInherit: {
          backgroundColor: '#303030',
          color: '#fff',
          // 在此处添加后代选择器即可直接修改AppBar内部子元素样式
          '& .MuiToolbar-root': {
            padding: '0 20px'
          },
          '& .MuiTypography-root': {
            color: '#fff',
            fontSize: '18px'
          },
          '& .MuiIconButton-root': {
            color: '#fff',
            '&:hover': {
              backgroundColor: 'rgba(255,255,255,0.1)'
            }
          }
          // 其他需要修改的内部子元素，按照对应MUI类名添加选择器即可
        },
      },
    },
    // 其余组件的配置也按照同样规则转换即可
  },
})

核心改动说明 #

• v4的palette.type改为v5的palette.mode，该字段必须放在palette对象内部，你之前的代码层级有误。
• v4的全局组件默认属性props，在v5中统一放在components.对应组件名.defaultProps下，功能完全一致。
• v4的组件样式覆写overrides，在v5中改为components.对应组件名.styleOverrides，原有类名规则保持不变。
• 要修改AppBar内部子元素样式，直接在对应覆写类名下加后代选择器即可，无需额外处理。

关于是否需要单独创建Navbar主题 #

完全不需要，全局主题的components配置已经可以覆盖所有全局/组件级的样式、默认属性配置需求，单独拆分子主题反而会增加主题嵌套的复杂度，提升后续维护成本。

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