How do I change the background color of the body?

The simplest solution is a bit hacky, but you can use raw javascript to modify the body style:

document.body.style = 'background: red;';
// Or with CSS
document.body.classList.add('background-red');

A cleaner solution could be to use a head manager like react-helmet or next.js Head component.

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <style>{'body { background-color: red; }'}</style>
            </Helmet>
            ...
        </div>
    );
  }
};

Some css-in-js also offers tools to manage global level styles; like styled-components injectGlobal.

In the end, there's a lot of tools providing cleaner ways to handle this. But if you don't want to rely on third party, the raw JS option might be good enough if you don't make it too interactive.


The simplest solution without doing anything fancy is to:

1) Open public/index.html

2) Add an inline style to your body like this: <body style="background-color: red">

Tags:

Reactjs

Recent Posts