title: Warning: Prop `className` did not match in Next.JS site with Styled Components
body: <p>I've searched Stack Overflow for similar questions but the answers either refer to old versions or aren't relevant to my situation.</p>
  <p>I get the above error for the first component on the page which uses Styled Components. If I remove that component I get the error for the next one and so on, so I assume there's a problem with the hydration process and it's happening for every className.</p>
  <p>I have a <strong>_document.tsx</strong> file which extends the Document class and has the following getInitialProps function</p>
  <pre><code>static async getInitialProps (ctx) {
  
      const sheet = new ServerStyleSheet()
      const originalRenderPage = ctx.renderPage
  
      try {
  
          ctx.renderPage = () =&gt;
              originalRenderPage({
              enhanceApp: App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;)
          })
  
          const initialProps = await Document.getInitialProps(ctx)
          
          return {
              ...initialProps,
              styles: (
                  &lt;&gt;
                      {initialProps.styles}
                      {sheet.getStyleElement()}
                  &lt;/&gt;
              )
          }
          
      } finally {
          sheet.seal()
      }
      
  }
  </code></pre>
  <p>My hunch is that it is something to do with this code because before I upgraded to Typescript (and had to change my _app.tsx file) I didn't get this error, but I have no idea how to fix it.</p>
  <p>Any help would really be appreciated.</p>