reactjs - 在暗/亮模式 Material UI 之间切换

Question

我就是想不通。我想用 Switch 改变背景，但它只在第一次起作用，对后续的点击不起作用。这是代码沙箱:

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

谁能告诉我这是怎么回事？我在 React 中使用 Material UI

最小可重现示例:这是我的 App 组件

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 documentation , 要在明暗之间切换，他们建议 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 一起工作的原因在 a Github issue 中得到解决。 ，其中指出此行为应在 v5 中修复(仍处于测试阶段)。