时间戳

首页 > 解决方案 > 如何使用 React.StrictMode 修复 ThemeProvider

reactjs - 如何使用 React.StrictMode 修复 ThemeProvider

问题描述

我正在尝试为暗模式和亮模式主题设置切换。在消除了项目中的几乎所有内容后，我设法在一个最小的示例中重现了该问题。

当我使用React.StrictModeJSX 包装器时，它有助于防止开发时出现问题，主题可以切换ThemeProvider一次，但之后不再应用更改。

这是一个可以使用的实时代码示例。检查一下，然后按几次切换暗模式按钮，你会发现它永远不会回到亮模式。

但是，如果您只是删除React.StrictMode包含所有内容的标签，该应用程序将按预期工作：

由此

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

对此：

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

有任何想法吗？这是 react 还是 material-ui 错误？或者有什么方法可以不同地使用这些？

标签： reactjstypescriptmaterial-ui

解决方案

聚会很晚了，但我遇到了同样的问题。

Aparrently Material UI 不完全支持严格模式，但您可以使用此功能解决问题，并且仍然具有材质主题和严格模式。

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

我像这样使用它

  const theme = unstable_createMuiStrictModeTheme(themeCreator(themeName));

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

推荐阅读