diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 66a23b7a0451f8..435d0231618ee7 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/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>
     );
 
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>
+  );
+}