DEV Community

Cover image for Getting rid of Next.js & styled-components Warning: Prop `className` did not match
Tarek Campos
Tarek Campos

Posted on

Getting rid of Next.js & styled-components Warning: Prop `className` did not match

So, if you've been in touch with the Next.js + styled-components error: "Warning: Prop className did not match", at development stage, here's a how to solve that problem.

Error Image

This problem only occurs on development stage of Next.js enviroment basically because at the current version of Next.js (11.1.2), Next uses Babel under the hood.

And because of that, we need to inform the compiler that we're using the styled-component library, in a way to keep the stylized layout rendered at refresh time.

For our own lucky, there is an easy way to solve that. With that in mind, lets add the babel-styled-components plugin, as you can see below:

$ yarn add babel-plugin-styled-components -D
Enter fullscreen mode Exit fullscreen mode

or in case you're using npm:

$ npm install --save-dev babel-plugin-styled-components
Enter fullscreen mode Exit fullscreen mode

After that, at the root of our directory, lets create a .babelrc file, then insert the code below:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
Enter fullscreen mode Exit fullscreen mode

And that's it, just restart the development build of Next in a way to babel see and apply the latest config, then it should be working 100% error-free.

Discussion (0)