如何使用 React.StrictMode 修复 ThemeProvider答案

【问题标题】：How to fix ThemeProvider with React.StrictMode如何使用 React.StrictMode 修复 ThemeProvider
【发布时间】：2020-04-13 20:35:26
【问题描述】：

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

当我使用React.StrictMode JSX 包装器useful to prevent issues as you develop 时，可以使用ThemeProvider 切换一次主题，但之后不再应用更改。

这里有一个live code example 可以玩。检查一下，然后按几次切换暗模式按钮，您会发现它永远不会回到亮模式。

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

从这里

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

到这里：

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

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

【问题讨论】：

我在这篇博文之后也看到了一些奇怪的行为。 58bits.com/blog/2020/05/27/material-ui-theme-switcher-react 删除解决了这个问题；但我不明白为什么。根据文档，StrictMode 仅用于警告/信息目的，它不应该真正改变应用程序的行为。

标签： reactjs typescript material-ui

【解决方案1】：

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

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

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>
  );

【讨论】：