Emotion

Introduction

✏️ Edit this page

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Framework Agnostic

npm i emotion

emotion documentation

The emotion package is framework agnostic and the simplest way to use Emotion.

  • Requires no additional setup, babel plugin, or other config changes.

  • Works in situations where configuration is restricted or not possible such as with Create React App

  • The css prop is not used or needed.

  • You simply prefer to use the css function to generate class names and cx to compose them.

  • Server side rendering requires additional work to set up

import { css, cx } from 'emotion'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)
Hover to change color.

React

npm i @emotion/core

The “@emotion/core” package requires React and is recommended for users of that framework if possible.

  • Best when using React with a build environment that can be configured.

  • CSS prop support

    • Similar to the style prop but adds support for nested selectors, media queries, and auto-prefixing.

    • Allows developers to skip the styled API abstraction and style components and elements directly.

    • The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.

    • Reduces boilerplate when composing components and styled with emotion.

  • Server side rendering with zero configuration.

  • Theming works out of the box.

  • ESLint plugins available to ensure proper patterns and configuration are set.

@emotion/core css prop documentation

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)
Hover to change color.
npm i @emotion/styled @emotion/core

The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.

@emotion/styled documentation

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)

Libraries that Inspired Us