Link Search Menu Expand Document

CSS-in-JS is a styling technique where JavaScript is used to style components. Next Right Now uses Emotion as its CSS-in-JS library.


About Emotion

Emotion is a library designed for writing css styles with JavaScript. https://emotion.sh/docs/introduction

Next.js provides CSS-in-js using styled-jsx, but we dislike it for several reasons. It’s not very intuitive to write styles that way, and it needs extra dependencies/configuration to work with nested components and such.

Instead, we use Emotion in this project, which allows writing components using either the styled notation, or the css notation.

It’s strongly recommended reading the official documentation about how to use it.


Table of contents