使用自定义颜色的 Material UI 警报

Question

我可以为 MUI 警报组件设置自定义颜色吗？文档建议唯一的颜色选项是与四个严重性道具相匹配的四个颜色选项。

Answer 1

对于 MUI V5，如果有人想要更改主题中的背景颜色，这对我有用。

export const theme = createTheme({
  components: {
    MuiAlert: {
      styleOverrides: {
        standardSuccess: {
          backgroundColor: 'green',
          color: 'white'
        },
        standardError: {
          backgroundColor: 'red',
          color: 'white'
        },
        standardWarning: {
          backgroundColor: 'orange',
          color: 'white'
        },
        standardInfo: {
          backgroundColor: 'grey',
          color: 'black'
        }
      }
    },
    
  },
});

并通过设置变体来工作：

<Alert severity="success">Success</Alert>
<Alert severity="error">Error</Alert>
<Alert severity="warning">Warning</Alert>
<Alert severity="info">Info</Alert>

Answer 2

这是可能的。引用API 文档：

您可以通过以下自定义点之一覆盖组件的样式：

• 带有类对象 prop 的规则名称。
• 具有全局类名。
• 具有主题和覆盖属性。

这个codesandbox中的一个粗略的例子