Add a class to the Body element in React

avatar

Borislav Hadzhiev

Wed Apr 27 20222 min read

Add a class to the Body element in React #

To add a class to the body element in React:

  1. Access the body element as document.body in useEffect or an event handler.
  2. Use the classList.add() method to add a class to the body tag.
  3. For example, document.body.classList.add('my-class').
App.js
import {useEffect} from 'react'; import './App.css'; export default function App() { useEffect(() => { // 👇 add class to body element document.body.classList.add('bg-salmon'); // 👇️ adding multiple classes to body tag document.body.classList.add( 'bg-salmon', 'my-class-1', 'my-class-2', 'my-class-3', ); // 👇️ removing classes from body element document.body.classList.remove('my-class-3'); // 👇️ checking if body element contains a class if (document.body.classList.contains('bg-salmon')) { console.log('body tag contains class'); } }, []); return ( <div> <h2>Hello world</h2> </div> ); }

And here is the css for the example.

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

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

We can access the body element on the document object.

If the class is already present on the body element, it won't get added twice.

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

If you need to remove the classes when the component unmounts, return a cleanup function from the useEffect hook.

App.js
useEffect(() => { // 👇 add class to body element document.body.classList.add('bg-salmon'); return () => { // 👇️ removing classes from body element // when the component unmounts document.body.classList.remove('my-class-3'); } }, []);

You can pass as many classes to the classList.add() method as necessary.

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

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

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

You can also add a class to the body element when an event occurs, e.g. a button is clicked.

App.js
import './App.css'; export default function App() { const handleClick = () => { // 👇️ add class to the body element document.body.classList.add('bg-salmon'); // 👇️ toggle class on the body element // document.body.classList.toggle('bg-salmon'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }

We set the onClick prop on the button element, so every time it is clicked, the handleClick function gets invoked.

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

App.js
import './App.css'; export default function App() { const handleClick = () => { // 👇️ toggle class on the body element document.body.classList.toggle('bg-salmon'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }

The classList.toggle method removes an existing class from the element if the class is present. Otherwise, it adds the class to the element.

Use the search field on my Home Page to filter through my more than 1,000 articles.