CODEWITHSUNDEEP
reactjsnext.jsemotion
ray oliver
ray oliver

Reputation: 43

Emotion CSS prop styling breaks on prefetching Next.js pages

I'm converting an existing React app to use Next.js and I'm having an issue with the production build. I'm using Emotion to add a css prop for styling. The pages in my app render fine until they prefetch links, at which point the styles disappear from the current page. There's some odd intermittent behaviour as well – sometimes when I then refresh the page I can navigate between pages without the styles disappearing but eventually they disappear again. Inspecting the component shows that the value of the css prop has not changed, but the styles are not being applied to the actual element. Has anyone experienced something similar or could point me in the direction of what is causing this?

Upvotes: 1

Views: 1108

Answers (1)

nightcoder
nightcoder

Reputation: 43

Checkout my comment on this issue for the library react-select which uses emotion for styling.

https://github.com/JedWatson/react-select/issues/3309#issuecomment-883001216

I was able to get the styled component to render by putting one in _app.tsx and hiding it so it always renders before any other components which may be delayed for one reason or another.

There are a couple other solutions in that thread that may help you as well.

Upvotes: 1

Related Questions