Set styles on the Body element in React

Set styles on the Body element in React #

To set styles on the body element in React:

Access the body element as document.body in useEffect or an event handler.
Use the style property to set styles on the body element.
For example, document.body.style.backgroundColor = 'lime'.

App.js

Copied!
import {useEffect} from 'react';

import './App.css';

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

    // 👇️ set style on body element
    document.body.style.backgroundColor = 'salmon';

    return () => {
      // 👇️ optionally remove styles when component unmounts
      document.body.style.backgroundColor = null;

      document.body.classList.remove('bg-salmon');
    };
  }, []);

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

And here is the css file for the example.

App.css

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

We can access the body element on the document object.

You can use the style object to read an element's styles or set new styles on the element.

If you need to add a class to the body element, use the classList.add method.

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

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

App.js

Copied!
useEffect(() => {
  // 👇 add class to body element
  document.body.classList.add('bg-salmon');

  // 👇️ set style on body element
  document.body.style.backgroundColor = 'salmon';

  return () => {
    // 👇️ optionally remove styles when component unmounts
    document.body.style.backgroundColor = null;

    document.body.classList.remove('bg-salmon');
  };
}, []);

To remove a style, you can just set it to null.

You can also set classes to the body element when an event is triggered, e.g. a button is clicked.

App.js

Copied!
export default function App() {
  const handleClick = () => {
    document.body.style.backgroundColor = 'salmon';
    document.body.style.color = 'white';
  };

  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 styles on the body element when an event occurs, conditionally check whether the styles are already present and remove them if they are, otherwise set the styles.

App.js

Copied!
export default function App() {
  const handleClick = () => {
    if (document.body.style.backgroundColor) {
      document.body.style.backgroundColor = null;
      document.body.style.color = null;
    } else {
      document.body.style.backgroundColor = 'salmon';
      document.body.style.color = 'white';
    }
  };

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

If the backgroundColor style is already set on the body element, we remove it by setting it to null, otherwise we set it to salmon.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set styles on the Body element in React

Set styles on the Body element in React #

Borislav Hadzhiev