App Router Styled Components Bug when using ThemeProvider

[moriahmaney]

Link to the code that reproduces this issue

https://github.com/moriahmaney/styled-components-bug-next

To Reproduce

1. start application yarn dev
2. navigate to http://localhost:3000/test
3. observe that client component renders with the theme applied, but there is a warning in the console about a class name mismatch:
   

Current vs. Expected behavior

I expected there to be no className mismatch when using a ThemeProvider with a StyledComponentsRegistry when following the instructions in the documents here: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.22
  pnpm: 8.8.0
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.