[material-ui] v6 changed the injection order <GlobalStyles/>

[thenano]

Steps to reproduce

Steps:

1. Checkout this codesandbox that displays the behaviour for v5: https://codesandbox.io/p/sandbox/mui-5-16-8-qylygf
2. Checkout this codesandbox that displays the behaviour for v6: https://codesandbox.io/p/sandbox/mui-5-16-8-forked-h5ccxk?workspaceId=42d580f6-8e29-46e7-b91f-43fc4f1f64c5

As a note, although the v6 codesandbox uses the latest v6 version, I also tested with 6.0.0 which has the same behaviour.
As far as I can tell, the behaviour change comes from <StyledEngineProvider injectFirst>, which seems to have changed the injection order between CssBaseline and GlobalStyles

Current behavior

GlobalStyles defined are injected before CssBaseline

Expected behavior

GlobalStyles should be injected after CssBaseline so that they can take precedence over baseline, and we can avoid having to use !important, as was the behaviour in v5

Context

I need some specific pages in my application to be able to override the defined default body background

Your environment

as provided in the codesandboxes above

Search keywords: globalstyles body cssbaseline

[siriwatknp]

This is a bug but I have to dig down to see if it's from our side or Emotion.

[thenano]

Thank you @siriwatknp! Let me know if I can help in any way.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@thenano How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.