No "working" styled-components example

[remix-run]

No "working" styled-components example

[seanmcquaid]

Hey ya'll! Is there any thought on getting an example together with Vite + Styled Components since this seems to be the direction Remix is going?

[mryechkin]

Would love to know that as well - just starting to explore Remix + Vite, and styled-components support is paramount for us.

[iDVB]

I'm still getting these hydration errors:

Any guidance is VERY much appreciated.

[roj1512]

Unrelated to this issue, but might still be interesting.

I’ve recently created a CSS-in-JS library that builds CSS like Tailwind, and doesn’t require a Babel/esbuild plugin. Specifically for having no issues with Remix.

Read more here: https://github.com/roj1512/classno
Example app: https://github.com/roj1512/classno_remix

[Xiphe]

Until the root-cause of this is hopefully resolved with react 18.3 you can try out remix-island or a similar approach to hydrate only parts of the document. It works reliably on my end with styled-components (can't stream them though)

[mehranhydary]

Hi @iDVB @Xiphe - are there any viable paths forward? Running into a hydration issue on Remix as well with a very minimal setup

[Xiphe]

Hi @mehranhydary

Both the remix and the react team are aware of this issue. React is actively working towards a solution as this is affecting any solution that hydrates react into the complete document.

On my end, https://github.com/kiliman/remix-hydration-fix and https://github.com/Xiphe/remix-island present good enough workarounds until the problem will eventually be fixed at it's root cause. You can also try to downgrade react to v17.

[markdalgleish]

Thanks for raising this issue! I've just merged a PR that updates our Styled Components example to address the issues mentioned here.

If you're still experiencing issues, let us know, or even help us improve the example if there's something we missed.

[Xiphe]

Hi @markdalgleish thanks for taking the time to update the example on this!

Indeed, the change you added to the example should make it so styled components itself don't cause hydration issues.
Unfortunately, from my experience this still isn't really safe to use with react ~18.2.

The problem is that when anything else produces a hydration error, react will wipe away the <style> outlet of styled-components in the head effectively causing any styled component to be unstyled. I haven't validated this with v6 but to my knowledge styled-components is not able to recover from this.

To me that's not a state in which I would ship an app to production.
To my knowledge the only fix is remix-island or waiting and hoping for [email protected].

I understand that there's little to nothing we can do about this from within remix itself (Other then maybe officially supporting rendering into a smaller part of the page) and the update you did on the example is certainly helpful. Still I wouldn't consider this issue fixed.