[system] Make @emotion/* fully supported in the System

[garronej]

Hi,
This PR is a follow-up on #32067 and is addressing #31825.

It is a POC with only the Button component.

The visual test case can be run with:

yarn test:regressions:dev

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

With this branch you'll get:

With mui/material-ui#master:

Summary, for the record, of why I am doing this:

1. To enable @emotion/react to be used for writing custom-style. See PR#31825.
2. To make @emotion/css work as expected when user to write custom styles.
3. Enable TSS to work out of the box with MUI, without user having to explicitly provide a cache and follow specific instructions for SSR.

What is done

When we call clsx() we mind the order in which we provide the arguments.
We make sure to put first the internal styles (lower priority) then, the user-defined styles (higher priority).

We also need to extract classes.root and apply it in the className instead of forwarding it to ButtonBase because we want to enforce that priority wise: internal styles < classes.root < className.

If you give me the green light, I can apply the same changes on every MUI components.

Best regard,

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against e041ef9

[mnajdova]

I believe we can go ahead and update the components with this change.

[garronej]

Ok great @mnajdova,
I will try to get at it this week end.

[garronej]

Hi @mnajdova,
I think I am done reordering classes for @mui/material.
I was pleasantly surprised that there weren't that many things to change 😊

[garronej]

🥳