Breaking News: Grepper is joining You.com. Read the official announcement!

react-dom.development.js:86 Warning: Prop `className` did not match. Server: Client:

Coding Era answered on October 4, 2023 Popularity 5/10 Helpfulness 2/10

answer react-dom.development.js:86 Warning: Prop `className` did not match. Server: Client:

react-dom.development.js:86 Warning: Prop `className` did not match. Server: Client:

Comment

For Old versions form Nextjs < 12, Go to `next.config.js` file and add 
this line inside nextConfig object:

  experimental: {
    // Enables the styled-components SWC transform
    styledComponents: true
  }

  
- for new NextJs above 12:

  compiler: {
    styledComponents: true
  }
  
- if that does not work you need to make an NO SSR component wrapper 
like this:

  // /components/NoSsr.js

  import dynamic from 'next/dynamic'

  const NoSsr = ({ children }) => <>{children}</>

  export default dynamic(() => Promise.resolve(NoSsr), { ssr: false })

- Then you need to add warp No SSR with your component like this:

  // /pages/index.js

  import NoSsr from '../components/NoSsr'
  import CircleButton from '../components/buttons/CircleButton'

  const HomePage = () => {
    return (
      <>
        <p>Home Page Title</p>
        <NoSsr>
         {/* Here your styled-component */}
          <makeTopMargin ele={...} />
        </NoSsr>
      </>
    )
  }

Popularity 5/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript prop

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

Coding Era

0 Answers Avg Quality 2/10

react-dom.development.js:86 Warning: Prop `className` did not match. Server: Client:

Contents

More Related Answers

react-dom.development.js:86 Warning: Prop `className` did not match. Server: Client:

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.