JIYIK CN >

Add a class to the body element in React:

1. useEffectAccess the body element as document.body in a or event handler.
2. classList.add()Add the class to the body tag using the method.
3. For example, document.body.classList.add('my-class').

import {useEffect} from 'react';

import './App.css';

export default function App() {
  useEffect(() => {
    // 👇 add class to body element
    document.body.classList.add('bg-salmon');

    // 👇️ 向body标签添加多个类
    document.body.classList.add(
      'bg-salmon',
      'my-class-1',
      'my-class-2',
      'my-class-3',
    );

    // 👇️ 从 body 元素中删除类
    document.body.classList.remove('my-class-3');

    // 👇️ 检查body元素是否包含一个类
    if (document.body.classList.contains('bg-salmon')) {
      console.log('body tag contains class');
    }
  }, []);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

Here is the css for the example.

App.css

.bg-salmon {
  background-color: salmon;
  color: white;
}

We use classList.add()the method to add a class to the body element.

We can access the body element on the document object.

If the class already exists bodyon the element it will not be added twice.

We pass an empty dependencies array to useEffectthe hook because we only want to add the class to the body element once - when the component mounts.

If we need to remove the class when the component unmounts, useEffectreturn a cleanup function from the hook.

useEffect(() => {
  // 👇 将类添加到 body 元素
  document.body.classList.add('bg-salmon');


  return () => {
    // 👇️ 当组件卸载时从 body 元素中删除类
    document.body.classList.remove('my-class-3');
  }
}, []);

We can pass as many classes as we want to classList.add()the method.

document.body.classList.add(
  'bg-salmon',
  'my-class-1',
  'my-class-2',
  'my-class-3',
);

If we need to remove one or more classes from the body tag, use classList.remove()the method.

document.body.classList.remove(
  'my-class-1',
  'my-class-2',
)

We can also add a class to the body element when an event occurs, such as clicking a button.

import './App.css';

export default function App() {
  const handleClick = () => {
    // 👇️ 将类添加到 body 元素
    document.body.classList.add('bg-salmon');

    // 👇️ 在 body 元素上切换类
    // document.body.classList.toggle('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

We set onClickthe property on the button element, so every time it is clicked, handleClickthe function will be called.

If we need to toggle a class on the body element when an event occurs, use classList.togglethe method.

import './App.css';

export default function App() {
  const handleClick = () => {
    // 👇️ 在 body 元素上切换类
    document.body.classList.toggle('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

If the class exists, classList.togglethe method removes the existing class from the element. Otherwise, it adds the class to the element.