DEV Community

Next.js + Styled Components The Really Simple Guide ▲ + 💅

Adrian Prieto on June 27, 2018

I recently started using Next.js, and quite honestly I have to say, is an awesome tool, you get a lot out of the box, and while there are some thin...

Read full post

Berthier Lemieux • Oct 21 '18

Thanks, this was really useful.

Let me add some SEO for people google for their Next + styled-component issues. Adding the babel configuration .babelrc in step 5 will fix the following errors/warnings:

Warning: Prop `className` did not match. Server: "sc-htpNat kRxhCE" Client: "sc-bdVaJa gCHvCg"

It looks like you've wrapped styled() around your React component (Component), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

Marwen Trabelsi • Jun 9 '19 • Edited

not really working, here explanation:
it only works for the first load, if you hard reload + remove cach, then it crashes and keeps crashing

Bo • Sep 27 '18 • Edited

Thanks mate, worked beautifully with the latest version of NextJS (v7)

Edit: actually, results in this annoying error:

Warning: Prop `className` did not match.

Any ideas? GitHub issues and Google are not helping.

Cédric Gourville • May 21 '20 • Edited

yes 2 years later

.babelrc


{
   "env": {
      "development": {
         "plugins": [
            [
               "styled-components",
               { "ssr": true, "displayName": true, "preprocess": false }
            ]
         ],
         "presets": ["next/babel"]
      },
      "production": {
         "plugins": [
            [
               "styled-components",
               { "ssr": true, "displayName": true, "preprocess": false }
            ]
         ],
         "presets": ["next/babel"]
      }
   },
   "plugins": [
      [
         "styled-components",
         { "ssr": true, "displayName": true, "preprocess": false }
      ]
   ]
}

Nick Lima • Mar 5 '22

Thanks for the post. It helped me a lot in the past.

I'm here to thank you and to say for the future users looking for styled-components on Next.js that now with the new Next.js 12 version, you can handle the styled-components natively in next-config file:

// next.config.js

module.exports = {
  compiler: {
    // ssr and displayName are configured by default
    styledComponents: true,
  },
}

Matheus Damião • Jan 18 '23

Thank you! That was a huge saving!

bbynog • Dec 21 '22

thank you!

Chris Castro • May 28 '20 • Edited

chrome user agent stylesheet annoyingly has a default margin of 8px around my website... how/where do you add body css to override that globally? I tried using/importing { createGlobalStyle } from 'styled-components' but that didn't seem to work, probably because my implementation was all trial and error guessing

"""const GlobalStyle = createGlobalStylebody { margin: 0 }"""
i then wrapped the above component around my app, and all it did was make the contents of my app disappear like whiteout :-(

also, github.com/vercel/next.js/tree/mas... offers no explanation on how/where to inject global css

Kyle Winkler • Nov 5 '21

Well one major issue is you shouldn't wrap your app with the GlobalStyle component.
This is a common mistake actually, but you'll notice that GlobalStyle isnt a react component and it does not take children as a prop so anything inside won't be rendered.

Instead you need to render it as a self closing tag <GlobalStyle />

Norman Enmanuel • Jun 7 '20

The solution to this problem is using the updated version of the pages/_document.js file.
github.com/vercel/next.js/blob/mas...

Susanne Karin Lundblad • Feb 28 '19

Hi! When adding <title> to the _document.js file I get an error

Warning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title

Paul Matthew Jaworski • Dec 11 '19

That's absolutely right. You should put it in next/head instead.

Asep Hikmat Fatahillah • Mar 1 '19 • Edited

I am using latest NextJS (8.0.3) and Styled-Components (4.1.3) and seems like it doesn't need to extend the <Document /> component anymore (step 6), because I don't see any error(?)

edit: Nope, my fault. Step 6 will make the page's style rendered before being served in the browser, so there will be no flash of unstyled content

Mustafa Türk • Jul 11 '19 • Edited

Thanks!

Is there a specific reason for installing babel-plugin-styled-components as a dev dependency, since you are not using it anywhere? Or am I missing something here?

Mike Sutherland • Nov 18 '18

Thanks, really useful. Solved the issues I was running into

jan paul • Dec 24 '21

sorry to comment so late on this man. dont know if you will even read this.

do you have some experiences how much your steps 1- 4 in

MyDocument extends Document

would impact speed, in terms of build time?

i mean is styled components still i thing in react nowadays? i moved to angular and am tinkering on next in spare time, but did not quiete like tailwinds bootstrappy approach

Jeff • Jul 26 '19 • Edited

This was a useful starting point, but I found that Next.js maintains an example that is more up to date. Check it out here...

Adrian Prieto • Aug 1 '19

Hey Jeff, you are probably right, Next.js has made so many great changes since I wrote this post, that I'm not surprised this is no longer up to date, I would definitely suggest to follow their documentation. Thanks for the heads up. By the way what are the main changes?

Jonatas de Oliveira Coêlho • Mar 2 '21 • Edited

Hey, Adrian! This is exactly what I was looking for. Thanks!

Do you guys try to use it with Typescript?

I get an error on {this.props.styleTags} and I don't now how to type the class correctly to understand it as part of the MyDocument.

Adam Mescher • Nov 17 '18

Solved my issues. Thanks for laying all of this out in such a complete and understandable way.

Anthony Marquez • Jul 7 '19

thanks for this mate really saved my bacon

ann lin • Aug 20 '18

are we able to move const sheet = new ServerStyleSheet(); out of the class? so we just create an instance of ServerStyleSheet instead of creating new one every time we render a page?

Julio Lima • Sep 19 '21

Amazing the configuration of ".babelrc" was not working with the default configuration of provided by styled components, something related with works just in CRA.

I'll add something... "styled-components" already have the "babel-plugin-styled-components" so you don't need to install.

Tim Knapp • Mar 27 '20

Thanks! That was very helpful and very easy to follow along! Worked like a charm

Adrian Prieto • Mar 27 '20

I'm glad! good luck with everything!

TheoMer • Jun 9 '19

Is it possible to do strict (nonce) csp (content security policy) with next/styled components?

beatlecz • Apr 1 '19 • Edited

Great post! Works like a charm on Next 8 ... Thank you!

eliastouil • Feb 4 '19

Your article was really useful to me.
With styled-components 3.3.3 i'm unable to use injectGlobal, any thoughts or example ?
Thanks :)

Dennis Mathenge • Aug 11 '19

injectGlobal has been replace with a createGlobalStyle component. Read more about it here:
styled-components.com/docs/faqs#wh...

Nathan Nobbe • Aug 21 '19

It seems to be applying the CSS client side. The page loads without any styling, then a second later styles are applied...

I suppose this solution does not work well in conjunction with styled-jsx?

Alexon da Silva Moreira • Jun 19 '20

so how would I do with REACT + NEXT + STYLED-COMPONENT to put a css background image
how I use this css with next -> backound-image> url ('........')

Tito • Mar 23 '20

Thank you for this, very well written and to the point!

AhmedMoh • Dec 2 '20

Hey.. any help with the className problem? Couldn't solve it any way..

Rahul • Jun 8 '21

You saved me. Thanks!

Daniel Gadd • Sep 29 '21 • Edited

What about the error
error The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'
This article either has to be depreciated or updated to support amp