emotion

What is emotion?

Emotion is a performant and flexible CSS-in-JS library that allows you to style applications quickly and efficiently with JavaScript. It provides powerful and flexible tools for writing CSS styles with JavaScript, including support for styled components, CSS prop, and keyframes for animations.

What are emotion's main functionalities?

Styled Components

Styled components allow you to create React components with styles attached to them. This makes it easy to manage styles in a modular and reusable way.

const Button = styled.button`
  color: hotpink;
`;

<Button>Click me</Button>

CSS Prop

The CSS prop allows you to style elements using a prop directly in your JSX. This is useful for applying styles conditionally or dynamically.

<div css={{ color: 'hotpink' }}>Hello World</div>

Keyframes for Animations

Emotion provides support for keyframes, allowing you to define animations in your JavaScript code. This makes it easy to create complex animations and apply them to your components.

import { keyframes } from '@emotion/react';

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
`;

const BouncingDiv = styled.div`
  animation: ${bounce} 1s ease infinite;
`;

<BouncingDiv>Bounce!</BouncingDiv>

Other packages similar to emotion

styled-components

Styled-components is another popular CSS-in-JS library that allows you to write plain CSS in your JavaScript. It offers a similar API to Emotion's styled components and is widely used in the React community.

aphrodite

Aphrodite is a CSS-in-JS library developed by Khan Academy. It focuses on performance and provides a straightforward API for defining styles in JavaScript. It is less feature-rich compared to Emotion but is known for its simplicity and performance.

jss

JSS is a library for generating CSS from JavaScript. It provides a powerful and flexible API for defining styles and supports various plugins for additional functionality. JSS is highly customizable and can be used with various frameworks, not just React.

README

emotion

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

Table of Contents

• Quick Start
• API
  • Generate Class Names — css
  • Global Styles — insertGlobal
  • Animation Keyframes — keyframes
  • Composing Class Names — cx
• Server Side Rendering
• Babel Plugin

Quick Start

Get up and running with a single import.

npm install --save emotion

import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
`
app.classList.add(myStyle)

API

css

The css function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.

String Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'

render(
  <div
    className={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

Object Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'

render(
  <div
    className={css({
      backgroundColor: 'hotpink',
      '&:hover': {
        color
      }
    })}
  >
    This has a hotpink background.
  </div>
)

Array of Object Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'
const isDanger = true

render(
  <div
    className={css([
      {
        backgroundColor: 'hotpink',
        '&:hover': {
          color
        }
      },
      isDanger && {
        color: 'red'
      }
    ])}
  >
    This has a hotpink background.
  </div>
)

Global Styles

injectGlobal injects styles into the global scope and is useful for applications such as css resets or font faces.

import { injectGlobal } from 'emotion'

injectGlobal`
  * {
    box-sizing: border-box;
  }
  @font-face {
    font-family: 'Patrick Hand SC';
    font-style: normal;
    font-weight: 400;
    src: local('Patrick Hand SC'),
      local('PatrickHandSC-Regular'),
      url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
        format('woff2');
    unicode-range: U+0100-024f, U+1-1eff,
      U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
      U+A720-A7FF;
  }
`

Animation Keyframes

keyframes generates a unique animation name that can be used to animate elements with CSS animations.

String Styles

// @live
import { css, keyframes } from 'emotion'

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`

render(
  <img
    className={css`
      width: 96px;
      height: 96px;
      border-radius: 50%;
      animation: ${bounce} 1s ease infinite;
      transform-origin: center bottom;
    `}
    src={logoUrl}
  />
)

Object Styles

// @live
import { css, keyframes } from 'emotion'

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)'
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)'
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)'
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)'
  }
})

render(
  <img
    src={logoUrl}
    className={css({
      width: 96,
      height: 96,
      borderRadius: '50%',
      animation: `${bounce} 1s ease infinite`,
      transformOrigin: 'center bottom'
    })}
  />
)

cx

cx is emotion's version of the popular classnames library. The key advantage of cx is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.

Combining class names

import { cx, css } from 'emotion'

const cls1 = css`
  font-size: 20px;
  background: green;
`
const cls2 = css`
  font-size: 20px;
  background: blue;
`

<div className={cx(cls1, cls2)} />

Conditional class names

const cls1 = css`
  font-size: 20px;
  background: green;
`
const cls2 = css`
  font-size: 20px;
  background: blue;
`

const foo = true
const bar = false


<div
  className={cx(
    { [cls1]: foo },
    { [cls2]: bar }
  )}
/>

Using class names from other sources

const cls1 = css`
  font-size: 20px;
  background: green;
`

<div
  className={cx(cls1, 'profile')}
/>