[docs] Access alert background colors in sx function.

[circularchaos]

Related page

https://mui.com/material-ui/react-alert/

Kind of issue

Missing information

Issue description

The MUI alert component uses a very light background for all severities. These light colors are not accessible when using the sx property for custom components e.g. background: (theme) => theme.palette. and are also not defined in the Palette docs: https://mui.com/material-ui/customization/palette/.

Context

No response

Search keywords: alert colors background

[siriwatknp]

It can be accessed when CSS theme variables feature is enabled.

const theme = createTheme({ cssVariables: true });

<ThemeProvider theme={theme}>
  <Box sx={{ bgcolor: 'Alert.successStandardBg', width: 200, height: 200 }} />
</ThemeProvider>

To learn more:

• Usage
• Tokens

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@circularchaos How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[siriwatknp]

Reopen, I think the available tokens have to be documented.

[circularchaos]

Thanks @siriwatknp, doesn't it also belong in the palette theme function object too? e.g.

<Box sx={{ bgcolor: (theme) => theme.palette.success.lightest, width: 200, height: 200 }} />.

[siriwatknp]

Thanks @siriwatknp, doesn't it also belong in the palette theme function object too? e.g.

<Box sx={{ bgcolor: (theme) => theme.palette.success.lightest, width: 200, height: 200 }} />.

No it does not. The background of the alert is calculated using lighten or darken, you can see here.

When css variables feature is enabled, the calculated value is attached to theme.vars.palette.Alert.successStandardBg.