Name: Fixing ClassName did not match error
Rating: 3.9 (7583 reviews)
Author: marvelcodes

Fixing ClassName did not match error

Marvellous - Mar 9 '22 -

- Dev Community

Warning: Prop `className` did not match. Server: Client:

This is probably one of the most annoying problem with Next.js, Typescript and styled-component luckily there's a work around for this.

You're gonna need to install babel-plugin-styled-components

yarn add --dev babel-plugin-styled-components

Create a file named .babelrc in the root directory and configure it. Here's the config file.

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

Restart your server and refresh your server and you should be good.

Here's the issue on Github

Ciao