Fixes emotion compat, className overwriting more specific classes

[garronej]

Hi,
This PR is related to #33205.

What is happening is that classNames overwrites the classes that applies to the root component.
I have implemented a fix for the Tab component. If you are fine with it I can generalize it.

The visual test case can be run with:

yarn test:regressions:dev

Then accessing: http://localhost:3000/regression-Table/EmotionCompat#no-dev

With this branch you'll get:

With mui/material-ui#master:

Best regard,

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 9c4a028

[mnajdova]

This will complicate things too much, it would mean that in each component we will need to merge the className prop at specific location. More over, how do we decide what "more specific classes" mean? I am saying this because there is no such thing as a more specific class, there are more specific selectors.

[mnajdova]

Suggested change

'className',

This will generate class name: MuiTab-className

[garronej]

This will generate class name: MuiTab-className
Sorry my implementation was naive, obviousy we dont want MuiTab-className.

[garronej]

This will complicate things too much

OK I understand why you don't see it as being worth fixing.

More over, how do we decide what "more specific classes" mean? I am saying this because there is no such thing as a more specific class, there are more specific selectors.

While I agree that I didn't phrase it correctly, I disagree on the fact that there is an ambiguity on what the expected behavior is.
If a user writes the following code, he will, for sure, expect the background to be green.

 <Tab
          icon={<PhoneIcon />}
          label="Background should be green"
          className={css({ backgroundColor: 'red' })}
          classes={{
            labelIcon: css({ backgroundColor: 'green' })
          }}
 />

Any classes specified in the classes props that apply to the root component is expected to take priority over the className. (Except for classes.root where it isn't clear but we don't care.)

Anyway, I can make this work with a hack on TSS side so, no worries, feel free to close.

As always, thanks for reviewing @mnajdova!

[mnajdova]

Anyway, I can make this work with a hack on TSS side so, no worries, feel free to close.

Let's try to go with this first.

As always, thanks for reviewing @mnajdova!

Sure