0Pricing
CSS Academy · Lesson

Emotion: css() and styled()

Apply dynamic styles with Emotion's css() helper and styled() component factory.

What is Emotion?

Emotion is a CSS-in-JS library with a flexible API. It offers two main approaches: the css() function (framework-agnostic) and the styled() API (similar to styled-components). Both auto-generate scoped class names.

Installing Emotion

There are two packages depending on your needs:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

All lessons in this course

  1. Styled-components: Tagged Template Literals
  2. Emotion: css() and styled()
  3. CSS Modules: Scoped Styles
  4. Vanilla Extract: Zero-Runtime CSS-in-JS
← Back to CSS Academy