如何更改 state 以使我的切换按钮更改为暗模式？

Question

我已经为我的反应应用程序下载了 DarkModeToggle npm 但是我对实际添加功能有点困惑。 目前，该按钮让我在应用程序栏上单击它，按钮本身会发生变化，但是我的应用程序的 state 不会。

 import React, { useState, useEffect } from "react"; import { Container, AppBar, Typography, Grow, Grid } from "@material-ui/core"; import { useDispatch } from "react-redux"; import DarkModeToggle from "react-dark-mode-toggle"; // import { getPosts } from './actions/posts' import Posts from "./components/Posts/Posts"; import Form from "./components/Form/Form"; import wisp_logo from "./images/wisp_logo.png"; import useStyles from "./styles"; const App = () => { const [currentId, setCurrentId] = useState(); const classes = useStyles(); const dispatch = useDispatch(); const [isDarkMode, setIsDarkMode] = useState(() => false); return ( <Container maxwidth="lg"> <AppBar className={classes.appBar} position="static" color="inherit"> <DarkModeToggle onChange={setIsDarkMode} checked={isDarkMode} size={80} /> </AppBar> </Container> ); }; export default App;

Answer 1

我认为有两点需要改变：

第一个是“isDarkMode”是 boolean，而在 useState 中，您使用的是 function，所以必须是这样的：

const [isDarkMode, setIsDarkMode] = useState(false);

此外，在发送“setIsDarkMode”function 时，您需要更新 state，如下所示：

<DarkModeToggle
    onChange={() => setIsDarkMode(prevState => !prevState)}
    checked={isDarkMode}
    size={80}
/>

所以“onChange”现在是一个 function，每次点击都会更新 state

Answer 2

如果您希望自定义主题，您需要使用 ThemeProvider 组件以便将主题注入您的应用程序。 这是一个简单的例子：

自定义变量：

const darkTheme = createTheme({
  palette: {
    type: "dark"
  }
});

使用 ThemeProvider 组件：

<ThemeProvider theme={darkTheme}>
        <AppBar
          position="static"
          color={`${isDarkMode ? "default" : "primary"}`}
        >
          <DarkModeToggle
            onChange={setIsDarkMode}
            checked={isDarkMode}
            size={80}
          />
        </AppBar>
      </ThemeProvider>

使用三元组改变主题：

color={`${isDarkMode ? "default" : "primary"}`}

完整示例： https://codesandbox.io/s/holy-wood-cdgpks?file=/src/App.js