Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling <body> tag in _document - nextjs not working

See original GitHub issue

Hello Ben, Styling the custom body tag in nextjs doesn’t seem to work. added this in _document.tsx file

//_document.tsx 
import Document, { Html, Head, Main, NextScript } from 'next/document'
import tw from 'twin.macro'
...
 render() {
    return (
      <Html>
        <Head />
        <body tw="antialiased bg-black">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }

Issue Analytics

State:
Created 3 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

3reactions

ben-rogersoncommented, Jan 7, 2021

~~You’ll need to add the body within the stylesheet collection area instead:~~

Edit: This isn’t a good solution - it will duplicate the body tag 😦

// pages/_document.js

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import tw from 'twin.macro'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props =>
            sheet.collectStyles(
              <body css={tw`h-full mt-10 font-sans antialiased bg-yellow-700`}>
                <App {...props} />
              </body>
            )
        })
      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
}

2reactions

ben-rogersoncommented, Jan 8, 2021

For some reason, I thought you needed to add the styling within _document.js, must have been before my morning coffee.

Yes, createGlobalStyle is how I would style the body too. GlobalStyles doesn’t accept custom styling, perhaps in the future but adding that feature is not as easy as would seem.