Announcing Emotion 10!

Mitchell Hamilton
Nov 27, 2018 · 4 min read

Emotion 10 has been in the works for a long time, and we’re excited that it’s finally ready. It’s a significant change that we’re very excited about with improvements to the css prop, a Global component for dynamic global styles, zero config SSR and more with an incremental adoption strategy.

The CSS Prop

  • It required a babel plugin
  • It was not compatible with spreading an object as props
  • Style composition order was confusing, undocumented and could break

Emotion 10 fixes all of these issues and adds the ability to access the theme from the css prop! We’re very excited about this because we believe it’s one of the most straightforward and powerful css-in-js APIs.

Read more about the new css prop at https://emotion.sh/docs/css-prop.

Global Component

Zero-Config Server-Side Rendering

You can now publish a React component to NPM with styles, and it will just work with server-side rendering without requiring consumers to do anything.

New Package Names

Use the native ref prop with styled

import styled from '@emotion/styled'let StyledComponent = styled.div`
color: hotpink;
`
<StyledComponent ref={(node) => {}} />

Support styled shorthands without a babel plugin

import styled from '@emotion/styled'let StyledComponent = styled.div`
color: hotpink;
`

The as prop

import styled from '@emotion/styled'const Button = styled.button`
color: hotpink;
`
<Button as="a">something</Button>

Emotion’s as prop is heavily inspired by styled-components’ as prop. ❤️

Providing options via context

React StrictMode Compatible

Incremental Migration

Emotion 10 is a massive release, and we can’t cover all of the little changes, so for a more a more complete list of changes, see the changelog on GitHub.

I want to give a huge thanks to Sunil Pai for the css prop in glamor and glam. They were both huge inspirations for emotion 10’s css prop, emotion 10 wouldn’t exist(or emotion at all 😛) without Sunil’s fantastic ideas ❤️. I also want to give a big thanks to Thinkmill for giving me so much time to work on emotion!

Emotion

A css-in-js library focused on performance and developer…