Package Exports

emotion
emotion/babel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (emotion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

emotion

👩‍🎤 Glam + React

Install

npm install -S emotion glam

.babelrc

{
  "plugins": [
    "emotion/babel",
    "glam/babel"
  ]
}

API

emotion

import { emotion } from 'emotion'

const H1 = emotion('h1')`
  color: 'blue';
  font-size: 48px;
  transform: scale(${props => props.scale});
`

function Greeting ({ name }) {
  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
}


// You can also pass components in

const H2 = emotion(H1)`
  font-size: ${fontSize * 2/3}px;
  color: 'red';
`

function Greeting ({ name }) {
  return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
}

// this works too

const H3 = emotion.h3`
  font-size: ${fontSize * 1/3}px;
  color: 'red';
`

function Greeting ({ name }) {
  return <H3>Hello {name}</H3> // red, 16px text
}

css prop

When using the emotion babel plugin, any css prop is converted to a class name via glam and appended to any existing class names.

Similar to importing React when using jsx, import css from 'glam' must be at the top of your source files.

const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>

// is converted to

const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>