在深色/浅色模式之间切换 Material UI

Question

我就是想不通。我想用 Switch 更改背景，但它仅在第一次有效，在后续点击中不起作用。这是代码沙箱：

https://codesandbox.io/s/strange-shaw-2tfk5

有人可以告诉我发生了什么事吗？我正在使用 Material UI 和 React

最小的可重现示例：这是我的应用程序组件

import React from "react";
import { useState } from "react";
import { ThemeProvider, createTheme } from "@material-ui/core/styles";
import { Container, Switch, CssBaseline } from "@material-ui/core";

const darkTheme = createTheme({
  palette: {
    type: "dark",
    background: {
      default: "hsl(230, 17%, 14%)"
    }
  }
});

const lightTheme = createTheme({
  palette: {
    type: "light",
    background: {
      default: "hsl(0, 0%, 100%)"
    }
  }
});

const App = () => {
  const [mode, setMode] = useState("light");

  const selectedTheme = mode === "dark" ? darkTheme : lightTheme;

  return (
    <ThemeProvider theme={selectedTheme}>
      <CssBaseline />
      <Container maxWidth="lg">
        <h1>Hello</h1>
        <Switch onChange={() => setMode(mode === "light" ? "dark" : "light")} />
      </Container>
    </ThemeProvider>
  );
};

export default App;

Answer 1

根据Material UI 文档，要在明暗之间切换，他们建议useMemo按需创建一个新主题：

import { useState, useMemo } from "react";

function App() {
  const [mode, setMode] = useState("light");

  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          type: mode,
          background: {
            dark: "hsl(230, 17%, 14%)",
            light: "hsl(0, 0%, 100%)"
          }
        }
      }),
    [mode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="lg">
        <h1>Hello</h1>
        <Switch onChange={() => setMode(mode === "light" ? "dark" : "light")} />
      </Container>
    </ThemeProvider>
  );
}

即使使用时这也有效StrictMode。

StrictMode它在组件外部定义时不起作用的原因已在Github 问题中解决，该问题指出此行为应在 v5 中修复（仍处于测试版）。