Search code examples
reactjspuppeteeremotion

react-emotion's CSS not present in DOM

I use react-emotion to style some of my React components. I try to prerender my page with a server-side started Chromium instance (puppeteer), fetching the freshly build website and retrieve it's HTML as a string, to save it in it's own, dedicated HTML file.

However, every CSS generated by react-emotion doesn't get fetched. I've looked up the HTML by myself (using a real Chrome instance) and it's just not present. But the components are all styled correctly. While using the DevTools to look at the style definitions, I can see that every style definition is displayed in italic. What does that mean?

Is there any way to "render" the CSS right into the DOM via a style element?

Thank you.

Solution

  • It's currently a problem with Chrome. Emotion uses some kind of Chrome magic, so it doesn't need to render it's CSS to the DOM. You can call this little piece of code, before any emotion is used, to force the DOM rendering (loss of performance).

    import { sheet } from 'emotion';

sheet.speedy(false);

ReactDOM.render(<App />, myMountPoint);