How to change the background color of the body element in React?

Sometimes, we want to change the background color of the body element in React.

In this article, we’ll look at how to change the background color of the body element in React.

How to change the background color of the body element in React?

To change the background color of the body element in React, we can use the React Helmet package.

For instance, we write:

import React from "react";
import { Helmet } from "react-helmet";

export default function App() {
  return (
    <div>
      <Helmet>
        <style>{"body { background-color: orange; }"}</style>
      </Helmet>
      <p>hello world</p>
    </div>
  );
}

We put the style element inside the Helmet component so that it’s rendered in the head element.

Then we use "body { background-color: orange; }" to set the background color of the body element.

Therefore, we should see that the background color of the page is orange.

Conclusion

To change the background color of the body element in React, we can use the React Helmet package.