Styled Components + Remix SPA Mode #9376
Replies: 2 comments 2 replies
-
You should prerender the index.html . |
Beta Was this translation helpful? Give feedback.
-
I am facing a similar issue, though mainly with Material UI which is using emotion under the hood (I am also using Vite if that matters) If by "pre-rendering" we mean initializing the server HTML document with the relevant styles, to my findings, this doesn't seem to work, or rather doesn't affect anything in SPA mode once the app is built. https://stackblitz.com/edit/remix-run-remix-zzd6ri?file=vite.config.ts Start the app with:
Now let's try building:
To my understanding, Remix still requires a server to build as seen in the SPA Mode docs, but how is someone using SPA Mode supposed to persist styles in the Is there a fundamental issue in the reproduction I've provided that I am missing? Is this just the way things are if someone is still using CSS in JS? I'm not really sure where to go from here next. I was keen on getting SPA Mode to work with my Vite app at work, though this is something that might make users second guess Remix for SPAs assuming this is a Remix issue and not a skill issue from me. I don't mean to hijack the thread, but hoping more comments on one thread gets more traction than me making another thread that dies. |
Beta Was this translation helpful? Give feedback.
-
Based on the examples in the examples repo, Remix + Styled Components with SSR is a relatively solved solution. However, SPA mode makes things interesting. We do not have a server to inject the styles in at runtime so if there is a full document refresh (like in the case of an error that causes rehydration to kick off and render the ErrorBoundary) then all styles with styled components are lost.
Has anyone come up with a solution for this quite yet?
Beta Was this translation helpful? Give feedback.
All reactions