emotion: Emotion does not create style tags using Next.js
What happened before: I used css to add styles, which creates a class for the element and also injected the styles into<head> <style>…, now using next.js, it doesn’t but instead, I think the style is being injected through js files, and that gives me a problem: the styles are applied after the component appears on screen, so in my case I have a really big image , and I use emotion to set width, so when the screen is loaded, the image takes over the full screen, and only after that the emotion style, which defines width is applied.
And I don’t know what to do to solve it. Any suggestion? My site is live at https://webstation.dev, maybe on first load you will see that the images cover the entire screen, and only a few milliseconds that the emotion style is applied, and the image gets its expected size.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 17 (10 by maintainers)
For anyone interested with a real use-case example, check out https://github.com/UnlyEd/next-right-now
Interesting parts are:
@Andarist The link you give to Next.js Emotion Fiber example should be added to SSR doc page, because currently, when I read this page, it says there is nothing to do with Next.js which is wrong (if I do nothing, <style> tags are added after the component).
More
emotion-fiberis not a good name for the example.fibermeans nothing for me.Ok, I understand this now,
emotionpackage is framework agnostic. For usage with React, we have to use@emotion/core,@emotion/styled,create-emotion-server.cssfromemotionreturns a string.cssfrom@emotion/corereturns a custom data type.I’ve updated the example in the next.js repo: https://github.com/zeit/next.js/pull/9646 Would prefer your review.