I have tried for a while to override the style of a component, but only for one specific color and/or variant combination. I can't find a way to do that. Take as example the following alert:

<Alert severity="success" variant="outlined">Hello!</Alert>

I want to override the text color in the alert only for the outlined/success combination. I tried with this theme overrides and it doesn't work:

const theme = createMuiTheme({
    components: {
        MuiAlert: {
            styleOverrides: {
                outlined: {
                    severity: {
                        error: {
                            color: "#ffffff",
                        }
                    }
                }
            }
        }
    }
})

What is wrong with this approach?

I could get what I need by adding a colored span as the alert content or I could do the same with a css class but I feel these are workarounds and not proper solutions, and it will remove any benefit of a centralized theme provider.