reactjs - Cómo arreglar ThemeProvider con React.StrictMode

Estoy tratando de configurar un interruptor para los temas de modo oscuro y modo claro. Después de eliminar casi todo en el proyecto, logré reproducir el problema en un ejemplo mínimo.

Cuando uso el envoltorio JSX React.StrictMode, útil para prevenir problemas mientras desarrollas, el tema se puede alternar con ThemeProvider una vez, pero después de eso los cambios ya no se aplican.

Aquí hay un ejemplo de código en vivo para probar. Échale un vistazo y presiona el botón de alternar modo oscuro varias veces, y verás que nunca vuelve al modo claro.

Sin embargo, si simplemente eliminas la etiqueta React.StrictMode que lo envuelve todo, la aplicación funciona como se espera:

De esto

function App() {
  return (
    <React.StrictMode>
      <ThemeContextProvider>
        <ThemeWrapper />
      </ThemeContextProvider>
    </React.StrictMode>
  );
}

A esto:

function App() {
  return (
    <ThemeContextProvider>
      <ThemeWrapper />
    </ThemeContextProvider>
  );
}

¿Alguna idea? ¿Esto es un error de React o de Material-UI? ¿O hay alguna manera de usar estos de forma diferente?

Respuesta #1

Bastante tarde para la fiesta, pero estaba teniendo el mismo problema.

Aparentemente, Material UI no es totalmente compatible con el modo Estricto, pero puedes usar esta función para solucionar el problema y aún así tener temas de Material y el modo Estricto.

import { unstable_createMuiStrictModeTheme } from "@material-ui/core/styles";

Y lo estoy usando así

  const theme = unstable_createMuiStrictModeTheme(themeCreator(themeName));

  return (
    <ThemeContext.Provider value={setThemeName}>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        {props.children}
      </MuiThemeProvider>
    </ThemeContext.Provider>
  );