MUI5中通过主题文件修改Alert组件severity背景色无效

我想通过更新主题的方式，给MUI5 Alert组件不同severity（比如success）设置自定义背景色，让所有使用该组件的地方都生效，但试了两种写法都没成功。

开发者工具显示的样式效果：

我尝试的两种覆写代码 #

第一种写法： #

MuiAlert: {
  styleOverrides: {
    root: {
      filled: {
        filledSuccess: {
          backgroundColor: "grey",
        }
      },
    }
  },
},

第二种写法： #

MuiAlert: {
  styleOverrides: {
    filledSuccess: {
      backgroundColor: "grey",
    },
  },
},

正确的解决方法 #

方法1：提升选择器优先级（直接覆写样式） #

由于MUI默认的类选择器优先级比单独写filledSuccess高，需要用嵌套选择器来覆盖：

MuiAlert: {
  styleOverrides: {
    filled: {
      '&.MuiAlert-filledSuccess': {
        backgroundColor: 'grey',
      },
      '&.MuiAlert-filledError': {
        backgroundColor: '#ff4444',
      },
      // 按需添加其他severity：filledWarning、filledInfo
    }
  }
}

方法2：修改主题调色板（更推荐） #

直接在主题的palette中修改对应severity的主色，MUI会自动将这个颜色应用到filled类型的Alert组件：

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

const theme = createTheme({
  palette: {
    success: {
      main: 'grey',
    },
    error: {
      main: '#ff4444',
    },
    warning: {
      main: '#ffaa00',
    },
    info: {
      main: '#00aaff',
    },
  },
});

之前写法失败的原因 #

• 第一种写法错误嵌套了类结构：filled和filledSuccess是同一元素上的并列类，不是父子层级，不能嵌套定义样式。
• 第二种写法的选择器优先级不够：MUI默认的.MuiAlert-filled.MuiAlert-filledSuccess优先级高于单独的.MuiAlert-filledSuccess，所以自定义样式被覆盖。

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