Javascript 如何强制更新react代码中的组件，以将暗主题切换为亮主题

我试图在react中通过切换材质ui在明暗主题之间切换。它只发生一次，从黑暗主题切换到光明主题

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

---

我知道react状态更新是异步的，但是我能做些什么呢？

您所要做的就是导入并使用CreateMuiteme，而不是直接使用主题，您可以从dakTheme.js和lightTheme.js导出普通对象

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

export default lightTheme;

每次应用程序状态更改时，您必须重新创建主题用户切换主题

为了避免不必要的ThemeProvider重播，并因此导致整个应用程序的重播，您应该使用useMemo react挂钩根据黑暗状态更改主题

App.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;

lightTheme.js

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

export default lightTheme;

---

您所要做的就是导入并使用CreateMuiteme，而不是直接使用主题，您可以从dakTheme.js和lightTheme.js导出普通对象

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

export default lightTheme;

每次应用程序状态更改时，您必须重新创建主题用户切换主题

为了避免不必要的ThemeProvider重播，并因此导致整个应用程序的重播，您应该使用useMemo react挂钩根据黑暗状态更改主题

App.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;

lightTheme.js

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

export default lightTheme;

---

以下是工作代码：

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;

为了使主题正常工作，MUI需要在每次渲染时使用CreateMuiteme创建主题。我知道你在主题定义darkTheme.js和lightTheme.js中使用了CreateMuiteme，但这些都是多余的。您可以像这样安全地重写这些文件，这就是我在沙盒中所做的：

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

export default darkTheme;

---

沙盒：

下面是一个工作代码：

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;

为了使主题正常工作，MUI需要在每次渲染时使用CreateMuiteme创建主题。我知道你在主题定义darkTheme.js和lightTheme.js中使用了CreateMuiteme，但这些都是多余的。您可以像这样安全地重写这些文件，这就是我在沙盒中所做的：

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

export default darkTheme;

---

沙盒：

我看了一眼，我被难住了。我把你的沙盒分叉了：并尝试使用两个独立的主块和两个主题提供者。尽管如此，在第一次成功切换之后，主题不再改变，即使您可以在React-dev工具中看到包装器在DarkProvider和LightProvider之间切换！我们要么忽略了一些简单的东西，要么看到了一个奇怪的错误。你完全正确。我刚刚遇到了同一个问题。我看了一眼，我被难住了。我把你的沙盒分叉了：并尝试使用两个独立的主块和两个主题提供者。尽管如此，在第一次成功切换之后，主题不再改变，即使您可以在React-dev工具中看到包装器在DarkProvider和LightProvider之间切换！我们要么忽略了一些简单的东西，要么看到了一个奇怪的错误。你完全正确。我刚刚遇到了同样的问题。我在定义主题时已经使用了CreateMuiteme。编辑答案可以更好地回答你的问题。我在定义主题时已经使用CreateMuiteme。编辑答案可以更好地回答你的问题。