[system] Use a custom sheet to set prepend for GlobalStyles

[siriwatknp]

closes #43482

Root cause

Emotion does not pass prepend in GlobalStyles, see https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99, so the global CSS always inject at the end of head for client-side apps.

This PR create a custom sheet that will preserve the prepend flag.

Before: The text is blue index.css cannot override even using <StyledEngineProvider injectFirst>, see sandbox

After: The text is now red due to index.css overrides, see sandbox

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43632--material-ui.netlify.app/

@mui/joy: parsed: +0.06% , gzip: +0.08%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against b5b72c2

[DiegoAndai]

Thanks for working on this @siriwatknp!

Emotion does not pass prepend in GlobalStyles, see https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99, so the global CSS always inject at the end of head for client-side apps.

Does this mean that injectFirst never worked? Or is this a special case? In the CSS injection order section of our docs we use use prepend: true, is that not working either?

Emotion does not pass prepend in GlobalStyles

I agree with you that we should fix it on our side, but let's also create an issue in Emotion's repo to see if this is a bug on their side that they can eventually fix. We shouldn't wait for it, but if they eventually fix it we can simplify our implementation.

[siriwatknp]

Does this mean that injectFirst never worked?

Yes and No, it works with styled but not GlobalStyles.

[siriwatknp]

I agree with you that we should fix it on our side, but let's also create an issue in Emotion's repo to see if this is a bug on their side that they can eventually fix. We shouldn't wait for it, but if they eventually fix it we can simplify our implementation.

The issue is already there emotion-js/emotion#2790 (I put a comment here)