Using Emotion With React

Emotion is a performant and flexible CSS-in-JS library. More info

Articles & Tutorials

Styled-components vs. Emotion-JS for handling CSS (
Jan 21, 2021
In this article, we will compare styled-components and Emotion, including differences, drawbacks, and benefits.
  • Kasra Khosravi
How to Make a List Component with Emotion (
Jul 08, 2020
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with.
  • Robin Rendle
Getting started with Emotion and Gatsby (
Jan 27, 2019
Emotion is a library for authoring and composing CSS rulesets in a performant way. Here's how to get started using it with Gatsby.
  • Chris Biscardi

Podcast Episodes

Mitchell Hamilton - Writing CSS-in-JS with Emotion (
Jun 20, 2019
In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion.
  • Adam Wathan
  • Mitchell Hamilton
CSS in JS (
May 29, 2018
CSS in JS – is it good, is it bad? Una and Chris discuss this still unresolved debate.
  • Una Kravets
  • Chris Dhanaraj
Emotion with Kye Hohenberger (
May 15, 2018
Kye Hohenberger is the author of the Emotion JavaScript library, a popular choice among React developers who prefer using CSS-in-JS to traditional CSS stylesheets. In this episode we discuss his work on Emotion including where he got the initial inspiration for the project and his motivation for creating it. We also discuss the future of the project and what may be in store for the future of CSS-in-JS.


emotion (
Jun 26, 2019
CSS-in-JS library designed for high performance style composition
  • Mitchell Hamilton
styled-tools (
Jan 22, 2019
Useful interpolated functions for styled-components, emotion, JSS and other CSS-in-JS libraries.
  • Diego Haz