MUI V5 precedence - nested classes?
See original GitHub issueHi 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?
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Advanced (LEGACY) - MUI System
The class names are provided to the component with the classes variable. This is particularly useful when styling nested elements in a component....
Read more >The Ultimate Guide to the MUI 'sx' Prop - Smart Devpreneur
Styling Nested Components with SX The TextField is composed of several components, which means in the DOM it is composed of several elements. ......
Read more >Styling with React's Material-UI v4 – Part 1 - ireadyoulearn.
Styling nested child elements – with the parent selector (&), and the reference operator ... MuiButton-label” classes that Material-UI uses.
Read more >How do I replace dollar sign nested class selectors in MUI 5 ...
So far the only answer I found for this is located in the docs on how to migrate, here : mui.com/material-ui/migration/v5-style-changes/… – ...
Read more >Fix broken styles after upgrading to MUI v5 with TSS - Setup
In theory, when TSS and MUI uses the same emotion cache, the styles that you provide via className or classes should always take...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
Sounds good, ty for the fast help 😃