I wanted to use react-select which uses emotion on a project that was already using styled-components, but I couldn't seem to find how to do this anywhere so I banged my head against the wall for a bit and figured it out. I also added styled-jsx recently to compare render performance and ergonomics.

For the sake of saving people an hour or two, here is how I did it:

Tested on:

  • next@8.0.3
  • styled-components@4.1.3
  • styled-jsx@3.2.1
  • emotion-server@9.2.10

Your _document.js should look something like this:

This could probably be optimised further but I haven't had time to look at that yet.