Change body background dynamically in css

[yifeikong]

Let's say I have a page called warnings/[id].js, I would like to make the body {background: red} in my css for this page only. Apparently, I can not add it to the global css file included in _app.js because I only want one page to be red. And I can not use body in my module.css files since:

Syntax error: Selector "body" is not pure (pure selectors must contain at least one local class or id)

So I would like nextjs to support change global css in module css files. Maybe like

:global body {
    background: red;
}

Footnotes

Q: Why do I have to change body background, why not the container div?

A: overscrolling in macOS and iOS browsers will reveal body background, see https://stackoverflow.com/a/42264959/1061155

[manishprivet]

Use

<style jsx global>
  {`
      body {
          background: red;
       }
   `}
</style>

in your warning/[id].js

[lavcraft]

Nice solution

But next question - how to achieve this via css file? For projects without jsx

[ssmet]

I'm also looking into this, use case is on iOS you want the color to go behind the notch.

[manishprivet]

I believe in such cases we will have to manipulate document.body.style in useEffect... but I suspect it might lead to flashes as color will change after page render

[lavcraft]

@manishprivet yes, it's not good way to color background for first render

[manishprivet]

@lavcraft For vanilla JS projects this should be relatively simple though, right?
Something like this might be enough

body {
  background-color: blue !important;
}

[mylovelycodes]

try useEffect in your compoments

useEffect(()=> {
        // add overflow hidden for body tag
        document.body.classList.add('h-full');
        document.body.classList.add('overflow-hidden');
    }, [])