How to use Emotion

---

Table of contents

• Usage
  • SSR
• Dependencies
• Resource

---

Usage

We won’t cover usage of Emotion in this documentation, please refer to the official documentation about how to use it.

Next Right Now supports the following ways of using Emotion:

• Using css prop
• Using styled component

It’s up to you to decide how you prefer to use Emotion. Next Right Now doesn’t advise or enforce any strong opinion on this matter, it’s a personal choice.

At Unly, we usually use the css prop. In some rare cases, we find the styled component approach makes more sense. We eventually use both, but have a preference for the css way.

SSR

SSR is already configured and compatible with Next.js, since Emotion v10. Source You don’t have anything to do.

Dependencies

• @emotion/core: Necessary to use emotion, with built-in css notation support.
• @emotion/styled: Necessary to use the styled notation.
• emotion-theming: Theming library inspired by styled-components

Resource

• Introduction to Emotion

---