Material UI Alerts using custom colors

Question

Can I set a custom color for a MUI Alert component? The docs suggest that the only color options are the four that match the four severity props.

Answer 1

For MUI V5 in case someone is looking to change the background color in the theme this worked for me.

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'
        }
      }
    },
    
  },
});

And is working by setting the variant:

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

Answer 2

It's possible. Quoting the API docs:

You can override the style of the component thanks to one of these customization points:

• With a rule name of the classes object prop.
• With a global class name.
• With a theme and an overrides property.

A crude example in this codesandbox