MUI V5 precedence - nested classes?

[JohnnyCrazy]

Hi there,

I'm currently trying out tss-react and noticed a roadblock, which I'm not sure how to solve it: I'm unable to change the color of the deleteIcon of a Chip since the original styles take precedence. I also followed the steps of the README, see here for a repro: https://stackblitz.com/edit/tss-react-aupnsq?file=Hello.tsx

As you can see, overriding the color in the theme works, but individually styling it with withStyles creates the wrong class order.

Am I missing something obvious? Do I maybe somehow have to specify MuiButtonBase-root-MuiChip-root so it it's on the same level?

[JohnnyCrazy]

Maybe related to mui/material-ui#28664 and not even in the scope of tss-react 🤔

[garronej]

Damn it, it's not the expected behaviour indeed. Probably something that need to be addressed on the mui side though.
I will investigate with them.
In the meantime the only workaround I can suggest is this: https://stackblitz.com/edit/tss-react-wfuji8?file=Hello.tsx

Thank you for reporting

[garronej]

I have opened an issue about it.

In the meantime, since it looks like to be specifically related to the <Chip/> component you could use && to increase specificity:

const ChipStyled= withStyles(Chip, { 
    "deleteIcon": {
        "&&":{
            "color": "red"
        }
    }
});

[garronej]

They closed it. So do I. I don't think it's up to me. Reopen if you think otherwise.

[JohnnyCrazy]

Sounds good, ty for the fast help :)