如何強制更新我的反應代碼中的組件以將深色主題切換為淺色主題

Question

我正在嘗試使用material-ui中的Switch在明暗主題之間切換。 它只發生一次，它從黑暗主題切換到光明主題。 這是托管所有代碼的代碼沙箱的鏈接。

在控制台日志的幫助下，我可以看到控制台中的主題發生了變化，但反應並沒有更新它。

我知道反應 state 更新是異步的，但是我可以為此做些什么？

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

Answer 2

您所要做的就是導入和使用createMuiTheme而不是直接使用主題，您可以從dakTheme.js和lightTheme.js導出純對象

每次應用統計更改時，您都必須重新創建主題（用戶切換主題）

為避免 ThemeProvider 不必要的重新渲染，從而導致整個應用程序的重新渲染，您應該使用 useMemo 反應掛鈎來根據黑暗的 state 更改主題。

應用程序.js

import React, { useState, useMemo } 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";
function App() {
  const [dark, setDark] = useState(true);
  const Theme = useMemo(() => createMuiTheme(dark ? darkTheme : lightTheme), [dark]);
  return (
    <ThemeProvider theme={Theme}>
      <CssBaseline />
      <div>
        <PrimarySearchAppBar thm={dark} Togglethm={setDark} />
      </div>
    </ThemeProvider>
  );
}

export default App;

dartkTheme.js

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

export default darkTheme;

lightTheme.js

const lightTheme = {
  palette: {
    type: "light",
    primary: {
      main: "#2196f3"
    },
    secondary: {
      main: "#f50057"
    }
  }
};

export default lightTheme;