如何用React.StrictMode修复ThemeProvider

Question

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

当我使用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 bug？或者有什么方法可以不同地使用它们呢？

Answer 1

参加聚会太晚了，但我也遇到了同样的问题。

很明显，Material UI并不完全支持严格模式，但是你可以使用这个函数来解决这个问题，并且仍然可以使用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>
  );