[system] Fix dark mode flicker using useEnhancedEffect (#44812)

mui · Jan 20, 2025 · b7d66af · b7d66af
1 parent 5d3028f
commit b7d66af
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ThemeProvider from '../ThemeProvider';
 import InitColorSchemeScript, {
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
@@ -173,7 +174,7 @@ export default function createCssVarsProvider(options) {
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (
         colorScheme &&
         colorSchemeNode &&