如何在 Next/React/material-ui 项目中切换 body 上的类答案

【问题标题】：How could I toggle a class on body in Next/React/material-ui projects如何在 Next/React/material-ui 项目中切换 body 上的类
【发布时间】：2021-09-18 06:07:03
【问题描述】：

我有一个用 Next.js 和 React.js 编写的项目。我想通过设置 cookie 来实现暗模式切换，所以我使用 Material-ui 中的 <switch> 但我遇到了问题，当我在切换时将类添加到 <body> 时，我收到一个错误，告诉 document is not defined ！我无法在<body> 上添加或删除课程！同样，当<switch> 被选中并且我刷新页面时<switch> 不会保持状态并更改为关闭，但是当它为假时它会保持状态！


    import React, { useState, } from 'react';
    import Switch from '@material-ui/core/Switch';
    import Cookies from 'js-cookie';
    import styles from './DarkMode.module.scss';
    
    const DarkMode = () => {
      const [state, setState, ] = useState({ checkedA: false, });
    
      const darkModeHandler = (event) => {
        setState({
          ...state, [event.target.name]: event.target.checked,
        });
        Cookies.set('darkMode', event.target.checked);
        document.body.classList.add('darkMode');
      };

  return (
    <div
      className={styles.root}
    >
      <Switch
        checked={state.checkedA}
        onChange={darkModeHandler}
        color="primary"
        name="checkedA"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      />

    </div>
  );
};
export default DarkMode;

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

首先让我们修复重新加载时保留的状态。有两种方法可以做到这一点。

在useState内使用Cookies.get，不推荐。

const [state, setState] = useState({
    checkedA: Cookies.get("darkMode") || false
  });

使用 useEffect 并在初始渲染上设置状态

useEffect(() => {
    setState((initalState) => {
      return { ...initalState, checkedA: Cookies.get("darkMode") || false };
    });
  }, []);

在darkMode 和lightMode 之间切换

使用 classList 属性提供的toggle 方法来实现这一点。

const darkModeHandler = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.checked
    });
    Cookies.set("darkMode", event.target.checked);
    document.body.classList.toggle("darkMode");
  };

我们仍然希望在初始渲染上看到黑暗模式，当检查987654329 switch 987654330 @

useEffect(() => {
    setState((initalState) => {
      return { ...initalState, checkedA: Cookies.get("darkMode") || false };
    });
    if(!Cookies.get("darkMode")){
      document.body.classList.toggle("darkMode");
    }
  }, []);

工作示例https://codesandbox.io/embed/toggle-theme-zq3pu?file=/src/App.js

【讨论】：