Emotion: Using emotion to style a react UI library

[sami616]

Hi, i'm looking to use Emotion to style a react ui library (as a peer dependancy) and couldn't find any docs specific to this use case?

The docs talk about both emotion and @emotion/core but have left me a little confused as to which is preferred when using it in a codebase that will be consumed by another applications build step and what implications this might have when the consuming app requires SSR (ie nextJS)

Are there recommendations around this? And apologies if this is covered in the docs already!

Thanks,
Sami.

[Andarist]

The recommendation is to always use @emotion/core as peer dep. "Vanilla" emotion exists for integrating with non-React systems, but as it's not tied to a particular framework/technology it can be used with React as well.

Using @emotion/core has the benefit of SSR just working so you won't require from your consumers any extra steps to handle SSR in their apps.

[sami616]

Thanks so much @Andarist , just seen theming is handled by a separate package, emotion-theming, presumably the same applies here regarding it also needing to be a peer dep? (Appreciate this might be the wrong place to ask this!)

[Andarist]

Probably yes - that would be a good choice. We are pulling theme-related helpers into @emotion/core though (which is going to be renamed to @emotion/react) so you will be able to just use a single package as peer dep soon.