Alert styleOverrides not working for variations (only root works) #47206
Description
Steps to reproduce
Steps:
- Open this link to live example: https://stackblitz.com/edit/fhja3los?file=src%2FDemo.tsx
Current behavior
Even though there is a variation colorError and the className does get applied to the second alert in the above example, its styleOverrides has no effect. The red/yellow colors are not rendered out anywhere.
It looks like the root style is the only one in effect and colorError customisations (and presumably the others) never apply anywhere.
Expected behavior
If the typings say there is a variation colorError within styleOverrides (which they do), then I would expect any overridden styles there to have effect on the component when it is rendered with that very same variation (which it is). The className is there, so it feels like that className is not yet hooked up to the styleOverrides in question.
Context
I'm just trying to customise the colors for each severity without having to faff about with className selectors. Always feels a bit hacky and not future-proof doing that.
I thought this was a nice addition to put variations beyond root in styleOverrides, if only it worked... And for most components it does, just not for Alert.
Your environment
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 22.21.0 - C:\Program Files\nodejs\node.EXE
npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 142.0.7444.60
Edge: Chromium (141.0.3537.99)
Firefox: 144.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
Browser used: Firefox 144
Btw this is my environment. Whatever stackblitz uses, I dunno, open the link and find out 😀
Search keywords: Alert styleOverrides