javascript - 如何在我的 react 代码中强制更新我的组件以将深色主题切换为浅色主题

Question

我正在尝试使用 material-ui 中的 Switch 在浅色和深色主题之间切换。它只发生一次，从深色主题切换到浅色主题。 This is the link to the code sandbox where all the code is hosted.

在控制台日志的帮助下，我可以看到控制台中的主题发生了变化，但 React 并未更新它。

我知道 React 状态更新是异步的，但我可以为此做些什么？

Answer 1

这是一个工作代码:

import React, { useState } from "react";
import { ThemeProvider, CssBaseline } from "@material-ui/core";
import darkTheme from "./Theme/darkTheme";
import lightTheme from "./Theme/lightTheme";
import PrimarySearchAppBar from "./Components/Appbar";

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

function App() {
  const [dark, setDark] = useState(true);
  const Theme = dark ? createMuiTheme(darkTheme) : createMuiTheme(lightTheme);
  return (
    <ThemeProvider theme={Theme}>
      <CssBaseline />
      <div>
        <PrimarySearchAppBar thm={dark} Togglethm={setDark} />
      </div>
    </ThemeProvider>
  );
}

export default App;

请注意与您的代码不同的两行:

import { createMuiTheme } from "@material-ui/core/styles";
...
...
const Theme = dark ? createMuiTheme(darkTheme) : createMuiTheme(lightTheme);

似乎要使主题正常工作，MUI 需要创建主题(在每个渲染器上使用 createMuiTheme)。我知道您在主题定义(darkTheme.js 和 lightTheme.js)中使用了 createMuiTheme，但这些都是多余的。您可以像这样安全地重写这些文件(这是我在沙箱中所做的):

const darkTheme = {
  palette: {
    type: "dark",
    primary: {
      main: "#00e676"
    },
    secondary: {
      main: "#e6006f"
    }
  }
};

export default darkTheme;

沙盒:https://codesandbox.io/s/delicate-butterfly-d8jqd?file=/src/App.js