Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Emotion does not create style tags using Next.js
See original GitHub issueWhat 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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:17 (10 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.