From ea34ccf9e5e3b24b66391aa73c0e2282210ab396 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 13 Sep 2024 10:38:55 +0700
Subject: [PATCH 1/4] pass the array directly

---
 packages/mui-system/src/cssVars/createCssVarsProvider.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 66a23b7a0451f8..966b28b5f098e4 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -267,13 +267,7 @@ export default function createCssVarsProvider(options) {
 
     const element = (
       <React.Fragment>
-        {shouldGenerateStyleSheet && (
-          <React.Fragment>
-            {(theme.generateStyleSheets?.() || []).map((styles, index) => (
-              <GlobalStyles key={index} styles={styles} />
-            ))}
-          </React.Fragment>
-        )}
+        {shouldGenerateStyleSheet && <GlobalStyles styles={theme.generateStyleSheets?.() || []} />}
         <ThemeProvider
           themeId={scopedTheme ? themeId : undefined}
           theme={resolveTheme ? resolveTheme(theme) : theme}

From 1cfc2773cdac3b0d251dbe4adda9087b9483aa96 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 13 Sep 2024 13:16:39 +0700
Subject: [PATCH 2/4] trigger build


From 34023230521836dc22acf01ca4d73321d25b8f3d Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 16 Sep 2024 09:55:47 +0700
Subject: [PATCH 3/4] add regression

---
 .../InjectFirstWithThemeVars.js               | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 test/regressions/fixtures/CssVarsProvider/InjectFirstWithThemeVars.js

diff --git a/test/regressions/fixtures/CssVarsProvider/InjectFirstWithThemeVars.js b/test/regressions/fixtures/CssVarsProvider/InjectFirstWithThemeVars.js
new file mode 100644
index 00000000000000..c5fba10d094e84
--- /dev/null
+++ b/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>
+  );
+}

From 1945364f1e2c77f219c624499a48d5462f16c515 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 16 Sep 2024 20:23:20 +0700
Subject: [PATCH 4/4] render GlobalStyles last to be injected first

---
 packages/mui-system/src/cssVars/createCssVarsProvider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 966b28b5f098e4..435d0231618ee7 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -267,13 +267,13 @@ export default function createCssVarsProvider(options) {
 
     const element = (
       <React.Fragment>
-        {shouldGenerateStyleSheet && <GlobalStyles styles={theme.generateStyleSheets?.() || []} />}
         <ThemeProvider
           themeId={scopedTheme ? themeId : undefined}
           theme={resolveTheme ? resolveTheme(theme) : theme}
         >
           {children}
         </ThemeProvider>
+        {shouldGenerateStyleSheet && <GlobalStyles styles={theme.generateStyleSheets?.() || []} />}
       </React.Fragment>
     );