install.md

title
Install

Emotion can be used in many different ways. The easiest way to get started is to use the @emotion/core package.

# React
yarn add @emotion/core

or if you prefer npm

# React
npm install --save @emotion/core

To use it, import what you need, for example use jsx to create class names with styles.

// @live
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { jsx, css } from '@emotion/core'

const style = css`
  color: hotpink;
`

const SomeComponent = ({ children }) => (
  <div css={style}>
    Some hotpink text.
    {children}
  </div>
)

const anotherStyle = css({
  textDecoration: 'underline'
})

const AnotherComponent = () => (
  <div css={anotherStyle}>Some text with an underline.</div>
)
render(
  <SomeComponent>
    <AnotherComponent />
  </SomeComponent>
)

With styled

styled is a way to create React components that have styles attached to them.

# assuming you already have @emotion/core installed
yarn add @emotion/styled

or if you prefer npm

npm install --save @emotion/styled

// @live
import styled from '@emotion/styled'

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

render(<Button>This is a hotpink button.</Button>)

With babel-plugin-emotion

Note:

If you're using Create React App, you can't add custom babel plugins so you can skip this section.

IF YOU'RE LOOKING AT THIS NOW, YOU SHOULD USE @emotion/babel-plugin-core BUT IT WILL PROBABLY BE babel-plugin-emotion IN THE FUTURE

Emotion has an optional Babel plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.

yarn add babel-plugin-emotion

or if you prefer npm

npm install --save babel-plugin-emotion

.babelrc

"emotion" must be the first plugin in your babel config plugins list.

{
  "plugins": ["emotion"]
}

If you are using Babel's env option emotion must also be first for each environment.

{
  "env": {
    "production": {
      "plugins": ["emotion", ...otherBabelPlugins]
    }
  },
  "plugins": ["emotion"]
}

Recommended config

{
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [
        [
          "emotion",
          { "sourceMap": true, "autoLabel": true }
        ]
      ]
    }
  }
}