styled-components-vs-emotion

Last updated by @JuanmaMenendez on October 25th, 2019 A short doc comparing the popular CSS-in-JS libraries styled-components and emotion. For a more detailed comparison, see:

this Spectrum thread (Aug 2018 - Mar 2019)
this shorter Frontity discussion

Brief Description

`styled-components`

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

`emotion`

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

Functionality

The APIs of the two libraries have converged over time. Both let you create a component with styling specified via CSS, or via object notation. (Styled Components added the latter capability in May 2018.)

`styled-components`

// CSS syntax in tagged template literal
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

// Object syntax
const button = styled.button({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
});

`emotion`

// CSS syntax in tagged template literal

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>Hey! It works.</Button>)

---

render(
  <h1
    className={css`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `}
  >
    Hiya!
  </h1>
)

// Object syntax
const titleStyles = css({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
})

render(<h1 className={titleStyles}>Hiya!</h1>)

Comparison

Here's how the two libraries compare based on features and stats:

Features - at parity

This information was taken from the documentation websites.

Library	Attaching Props?	Media Queries?	Global Styles?	Nested Selectors?	Server Side Rendering?	Theming Support?	Composition?
`styled-components`	Yes	Yes	Yes	Yes	Yes	Yes	Yes
`emotion`	Yes	Yes	Yes	Yes	Yes	Yes	Yes

Stats

These numbers were pulled on October 18th, 2019.

Library	Creation Date	Last Updated (GitHub)	Size	Repo Stars	# of Contributors	Community Size (Spectrum)
`styled-components`	August 16th, 2016	8 days ago	? 14.6kb ?	26,197	252	10,113
`emotion`	May 27th, 2017	6 days ago	? 8.9kb ?	9,118	184	479

Worthy Notes

emotion is ready for React Concurrent mode and it has a smaller bundle size

emotion performed faster than styled-components back in March 12th when a comparison was done over all CSS-in-JS libraries. However, maintainers of styled-components are actively improving performance and say they are within 0.5-2x emotion's times.
Kent C. Dodds recommended emotion over styled-components in this tweet saying that it's smaller and faster.

Contributions

If you see a typo or something that is out-of-date or incorrect, please submit a PR and I will happily update this doc.

jsjoeio/styled-components-vs-emotion

styled-components-vs-emotion

Brief Description