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 :no_entry_sign: dangerJS against 9c4a028aa0f6d01b25ab88eea8ad562059c2e42c

[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