React MUI v5中全局覆盖Alert内Error图标颜色失败求助

• 问题根源：你之前尝试直接在MuiSvgIcon的styleOverrides中指定ErrorOutlineIcon是无效的，因为ErrorOutlineIcon是组件名称，而非MUI样式系统识别的类名或slot。MUI的SvgIcon组件统一使用MuiSvgIcon-root作为根类名，需要通过父组件（Alert）的样式来定位目标图标。

方案一：通过Alert的样式嵌套修改图标（推荐） #

直接在MuiAlert的standardError样式中嵌套修改内部的SvgIcon样式，仅针对错误提示框的图标生效：

const theme = createTheme({
  components: {
    MuiAlert: {
      styleOverrides: {
        standardError: {
          backgroundColor: colors.error.light,
          color: colors.error.dark,
          border: '4px solid',
          borderColor: colors.error.dark,
          // 嵌套修改内部图标样式
          '& .MuiSvgIcon-root': {
            color: '#000000', // 设置你需要的图标颜色
          },
        },
      },
    },
  },
});

方案二：全局指定Error Alert内图标的样式 #

如果需要让所有Error Alert中的图标统一应用样式，也可以通过MuiSvgIcon的全局样式结合父组件类名实现：

const theme = createTheme({
  components: {
    MuiAlert: {
      styleOverrides: {
        standardError: {
          backgroundColor: colors.error.light,
          color: colors.error.dark,
          border: '4px solid',
          borderColor: colors.error.dark,
        },
      },
    },
    MuiSvgIcon: {
      styleOverrides: {
        root: {
          // 仅匹配处于Error Alert中的图标
          '.MuiAlert-standardError &': {
            color: '#000000',
          },
        },
      },
    },
  },
});

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