[system] Pass the stylesheet directly to GlobalStyles (#43739)

packages/mui-system/src/cssVars/createCssVarsProvider.js

@@ -267,19 +267,13 @@ export default function createCssVarsProvider(options) {
 
     const element = (
       <React.Fragment>
-        {shouldGenerateStyleSheet && (
-          <React.Fragment>
-            {(theme.generateStyleSheets?.() || []).map((styles, index) => (
-              <GlobalStyles key={index} styles={styles} />
-            ))}
-          </React.Fragment>
-        )}
         <ThemeProvider
           themeId={scopedTheme ? themeId : undefined}
           theme={resolveTheme ? resolveTheme(theme) : theme}
         >
           {children}
         </ThemeProvider>
+        {shouldGenerateStyleSheet && <GlobalStyles styles={theme.generateStyleSheets?.() || []} />}
       </React.Fragment>
     );
 

test/regressions/fixtures/CssVarsProvider/InjectFirstWithThemeVars.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  ThemeProvider,
+  createTheme,
+  StyledEngineProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+const theme = createTheme({
+  colorSchemes: { dark: true },
+  cssVariables: { colorSchemeSelector: '.regression-inject-first-%s' },
+});
+
+function AutoDark() {
+  const { setMode } = useColorScheme();
+  React.useEffect(() => {
+    setMode('dark');
+  }, [setMode]);
+  return null;
+}
+
+export default function InjectFirstWithThemeVars() {
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme} modeStorageKey="regression-inject-first">
+        <AutoDark />
+        <Box
+          sx={{
+            border: 2,
+            borderColor: 'divider',
+            backgroundColor: 'background.default',
+            width: 100,
+            height: 100,
+            m: 1,
+          }}
+        />
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}