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
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 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.
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.)
// 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'
});
// CSS syntax in tagged template literal
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>)
Here's how the two libraries compare based on features and stats:
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 |
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 |
emotion
is ready for React Concurrent mode and it has a smaller bundle size
emotion
performed faster thanstyled-components
back in March 12th when a comparison was done over all CSS-in-JS libraries. However, maintainers ofstyled-components
are actively improving performance and say they are within 0.5-2x emotion's times.- Kent C. Dodds recommended
emotion
overstyled-components
in this tweet saying that it's smaller and faster.
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.