[system] Pass the stylesheet directly to GlobalStyles

[siriwatknp]

To unblock #43708

Added regression test: https://app.argos-ci.com/mui/material-ui/builds/32120/109050219

Root cause

After the fix from #43632, if <StyledEngineProvider injectFirst> is used, the global style injection order is included in the Emotion normal process like styled API. Meaning that Emotion will process the end of the GlobalStyles first. For example,

Screen.Recording.2567-09-13.at.11.49.57.mov

This causes unexpected behavior because the way CSS variables are generated should be ordered by:

<GlobalStyles styles={{ :root }} />
<GlobalStyles styles={{ light }} /> // inject after dark, this is the bug in https://github.com/mui/material-ui/pull/43708#issuecomment-2346368396
<GlobalStyles styles={{ dark }} />

Fix

This PR put the ordered stylesheet into a single GlobalStyles so that the injection order does not matter.

Screen.Recording.2567-09-13.at.11.51.36.mov

---

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 054986f

[DiegoAndai]

@siriwatknp could we add a test for this?

[siriwatknp]

@siriwatknp could we add a test for this?

Added a regression test (I think for use case like this, it's best to run the test in the real browser env). Also, tested with sandbox build, it fixes the issue.

https://app.argos-ci.com/mui/material-ui/builds/32120/109050219