Full Stack Radio

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.



episode 117: 117: Mitchell Hamilton - Writing CSS-in-JS with Emotion

In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion.

Topics include:

  • What CSS-in-JS even is
  • What Emotion does differently than other CSS-in-JS libraries
  • How to actually use Emotion to style your projects
  • How the JSX pragma works and what it's for
  • How Emotion works under the hood
  • Performance
  • Adding global styles to your project
  • Style re-use and composition in Emotion
  • Using Emotion with server-side rendering


  • Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free
  • DigitalOcean, get your free $50 credit at do.co/fullstack


  • Emotion
  • Glam
  • Glamor
  • Glamorous
  • Styled Components
  • JSX pragma
  • CSSStyleSheet.insertRule()
  • Global styles in Emotion
  • Server-side rendering in Emotion


 2019-06-20  51m