emotion next

NOTE: All of these packages are now in the emotion repo

An experimental css-in-js library built for React

This is pretty experimental and there will be breaking changes often. Don't use it for anything really important yet.

Why should I use this?

• Server side rendering just works. (just call react-dom's renderToString or renderToNodeStream)
• You like the css prop.
• You want a flexible css-in-js library.
• It works with string styles.
• It works with object styles.
• It has great composition.
• There's no babel plugin, just babel macros.(There's also a babel plugin now if you want it)(i.e. style minification, labels and etc. will work in react-scripts@2)

Why shouldn't I use this?

• It only works with react@>=16.3.0.
• Don't use it if you're totally fine with the styling solution you're already using
• Styles won't be cached in SSR if two elements have the same style and they have no common ancestor with styles from emotion or a Provider
• It requires every style to be rendered in the react tree
• It renders style elements next to the elements that are being styled in SSR so using pseudo-classes like :first-child and :nth-child is unsafe and pseudo-classes like :first-of-type and :nth-of-type should be used instead

Getting Started

yarn add @emotion/core

/** @jsx jsx */import{jsx}from'@emotion/core'// must be react@>=16.3.0import{render}from'react-dom'render(<divcss={{color: 'hotpink'}}>This is hotpink</div>,document.getElementById('root'))

String Styles

yarn add @emotion/css

/** @jsx jsx */import{jsx}from'@emotion/core'importcssfrom'@emotion/css'// must be react@>=16.3.0import{render}from'react-dom'render(<divcss={css`color: hotpink; `}>
This is hotpink
</div>,document.getElementById('root'))

Global

Note: Global styles are removed on unmount

import*asReactfrom'react'import{Global}from'@emotion/core'importcssfrom'@emotion/css'import{render}from'react-dom'render(<Globalstyles={[css`body {color: hotpink; } `,{html: {backgroundColor: 'darkgreen'}}]}/>,document.getElementById('root'))

Keyframes

yarn add @emotion/keyframes

/** @jsx jsx */import{jsx}from'@emotion/core'importcssfrom'@emotion/css'importkeyframesfrom'@emotion/keyframes'import{render}from'react-dom'constanimation=keyframes(css`from {transform:rotate(0deg); }to {transform:rotate(360deg); }`)render(<div><divcss={css`animation:${animation.name} infinite 20s linear;${animation.styles}; `}>
This is getting rotated
</div></div>,document.getElementById('root'))

styled

yarn add @emotion/styled

import*asReactfrom'react'importstyledfrom'@emotion/styled'// must be react@>=16.3.0import{render}from'react-dom'constContainer=styled.div` color: hotpink;`render(<Container>This is hotpink</Container>,document.getElementById('root'))

Theming

yarn add @emotion/provider

With the css prop

/** @jsx jsx */import{jsx}from'@emotion/core'importProviderfrom'@emotion/provider'importcssfrom'@emotion/css'import{render}from'react-dom'render(<Providertheme={{primary: 'hotpink'}}><divcss={theme=>({color: theme.primary})}/></Provider>,document.getElementById('root'))

With styled

import*asReactfrom'react'importProviderfrom'@emotion/provider'importcssfrom'@emotion/css'import{render}from'react-dom'constSomeComponent=styled.div` color: ${props=>props.theme.primary};`render(<Providertheme={{primary: 'hotpink'}}><SomeComponent/></Provider>,document.getElementById('root'))

Credit

emotion next was heavily inspired by glam.