question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MUI V5 precedence - nested classes?

See original GitHub issue

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.

image

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:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
garronejcommented, Nov 18, 2021

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

1reaction
JohnnyCrazycommented, Dec 8, 2021

Sounds good, ty for the fast help 😃

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found