emotion
The Next Generation of CSS-in-JS.
Last updated 25 days ago by mitchellhamilton .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install emotion 
SYNC missed versions from official npm registry.

emotion

The emotion package is framework agnostic and the simplest way to use Emotion.

Table of Contents

Quick Start

Get up and running with a single import.

npm install --save emotion
import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
`
app.classList.add(myStyle)

API

css

The css function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.

String Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'

render(
  <div
    className={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

Object Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'

render(
  <div
    className={css({
      backgroundColor: 'hotpink',
      '&:hover': {
        color
      }
    })}
  >
    This has a hotpink background.
  </div>
)

Array of Object Styles

// @live
import { css } from 'emotion'

const color = 'darkgreen'
const isDanger = true

render(
  <div
    className={css([
      {
        backgroundColor: 'hotpink',
        '&:hover': {
          color
        }
      },
      isDanger && {
        color: 'red'
      }
    ])}
  >
    This has a hotpink background.
  </div>
)

Global Styles

injectGlobal injects styles into the global scope and is useful for applications such as css resets or font faces.

import { injectGlobal } from 'emotion'

injectGlobal`
  * {
    box-sizing: border-box;
  }
  @font-face {
    font-family: 'Patrick Hand SC';
    font-style: normal;
    font-weight: 400;
    src: local('Patrick Hand SC'),
      local('PatrickHandSC-Regular'),
      url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
        format('woff2');
    unicode-range: U+0100-024f, U+1-1eff,
      U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
      U+A720-A7FF;
  }
`

Animation Keyframes

keyframes generates a unique animation name that can be used to animate elements with CSS animations.

String Styles

// @live
import { css, keyframes } from 'emotion'

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`

render(
  <img
    className={css`
      width: 96px;
      height: 96px;
      border-radius: 50%;
      animation: ${bounce} 1s ease infinite;
      transform-origin: center bottom;
    `}
    src={logoUrl}
  />
)

Object Styles

// @live
import { css, keyframes } from 'emotion'

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)'
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)'
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)'
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)'
  }
})

render(
  <img
    src={logoUrl}
    className={css({
      width: 96,
      height: 96,
      borderRadius: '50%',
      animation: `${bounce} 1s ease infinite`,
      transformOrigin: 'center bottom'
    })}
  />
)

cx

cx is emotion's version of the popular classnames library. The key advantage of cx is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.

Combining class names

import { cx, css } from 'emotion'

const cls1 = css`
  font-size: 20px;
  background: green;
`
const cls2 = css`
  font-size: 20px;
  background: blue;
`

<div className={cx(cls1, cls2)} />

Conditional class names

const cls1 = css`
  font-size: 20px;
  background: green;
`
const cls2 = css`
  font-size: 20px;
  background: blue;
`

const foo = true
const bar = false


<div
  className={cx(
    { [cls1]: foo },
    { [cls2]: bar }
  )}
/>

Using class names from other sources

const cls1 = css`
  font-size: 20px;
  background: green;
`

<div
  className={cx(cls1, 'profile')}
/>

Current Tags

  • 10.0.14                                ...           latest (25 days ago)
  • 10.0.0-beta.13                                ...           next (8 months ago)

136 Versions

  • 10.0.14                                ...           25 days ago
  • 10.0.0-really-unsafe-please-do-not-use.2                                ...           10 months ago
  • 10.0.0-really-unsafe-please-do-not-use.1                                ...           10 months ago
  • 10.0.0-really-unsafe-please-do-not-use.0                                ...           10 months ago
  • 10.0.9                                ...           4 months ago
  • 10.0.8                                ...           4 months ago
  • 10.0.7                                ...           6 months ago
  • 10.0.6                                ...           6 months ago
  • 10.0.5                                ...           7 months ago
  • 10.0.4                                ...           7 months ago
  • 10.0.3                                ...           7 months ago
  • 10.0.2                                ...           8 months ago
  • 10.0.1                                ...           8 months ago
  • 10.0.0                                ...           8 months ago
  • 10.0.0-beta.13                                ...           8 months ago
  • 10.0.0-beta.12                                ...           8 months ago
  • 10.0.0-beta.11                                ...           8 months ago
  • 10.0.0-beta.10                                ...           8 months ago
  • 10.0.0-beta.9                                ...           8 months ago
  • 10.0.0-beta.8                                ...           9 months ago
  • 10.0.0-beta.7                                ...           9 months ago
  • 10.0.0-beta.6                                ...           9 months ago
  • 10.0.0-beta.5                                ...           9 months ago
  • 10.0.0-beta.4                                ...           9 months ago
  • 10.0.0-beta.3                                ...           9 months ago
  • 10.0.0-beta.2                                ...           9 months ago
  • 10.0.0-beta.1                                ...           9 months ago
  • 10.0.0-beta.0                                ...           9 months ago
  • 9.2.12                                ...           10 months ago
  • 9.2.11                                ...           10 months ago
  • 9.2.10                                ...           10 months ago
  • 9.2.9                                ...           10 months ago
  • 9.2.8                                ...           a year ago
  • 9.2.6                                ...           a year ago
  • 9.2.5                                ...           a year ago
  • 9.2.4                                ...           a year ago
  • 9.2.3                                ...           a year ago
  • 9.2.1                                ...           a year ago
  • 9.2.0                                ...           a year ago
  • 9.1.3                                ...           a year ago
  • 9.1.2                                ...           a year ago
  • 9.1.1                                ...           a year ago
  • 9.1.0                                ...           a year ago
  • 9.0.2                                ...           a year ago
  • 9.0.1                                ...           a year ago
  • 9.0.0                                ...           a year ago
  • 9.0.0-3                                ...           a year ago
  • 9.0.0-2                                ...           2 years ago
  • 9.0.0-1                                ...           2 years ago
  • 9.0.0-0                                ...           2 years ago
  • 8.0.12                                ...           2 years ago
  • 8.0.11                                ...           2 years ago
  • 8.0.10                                ...           2 years ago
  • 8.0.9                                ...           2 years ago
  • 8.0.8                                ...           2 years ago
  • 8.0.7                                ...           2 years ago
  • 8.0.6                                ...           2 years ago
  • 8.0.5                                ...           2 years ago
  • 8.0.4                                ...           2 years ago
  • 8.0.3                                ...           2 years ago
  • 8.0.2                                ...           2 years ago
  • 8.0.2-12                                ...           2 years ago
  • 8.0.2-11                                ...           2 years ago
  • 8.0.2-10                                ...           2 years ago
  • 8.0.2-9                                ...           2 years ago
  • 8.0.2-8                                ...           2 years ago
  • 8.0.2-7                                ...           2 years ago
  • 8.0.2-6                                ...           2 years ago
  • 8.0.2-5                                ...           2 years ago
  • 8.0.2-4                                ...           2 years ago
  • 8.0.2-3                                ...           2 years ago
  • 8.0.2-2                                ...           2 years ago
  • 8.0.2-1                                ...           2 years ago
  • 8.0.2-0                                ...           2 years ago
  • 8.0.1-0                                ...           2 years ago
  • 8.0.0-0                                ...           2 years ago
  • 7.3.2                                ...           2 years ago
  • 7.3.1                                ...           2 years ago
  • 7.3.0                                ...           2 years ago
  • 7.2.2                                ...           2 years ago
  • 7.2.0                                ...           2 years ago
  • 7.1.1                                ...           2 years ago
  • 7.1.0                                ...           2 years ago
  • 7.0.13                                ...           2 years ago
  • 7.0.12                                ...           2 years ago
  • 7.0.11                                ...           2 years ago
  • 7.0.10                                ...           2 years ago
  • 7.0.9                                ...           2 years ago
  • 7.0.8                                ...           2 years ago
  • 7.0.7                                ...           2 years ago
  • 7.0.6                                ...           2 years ago
  • 7.0.5                                ...           2 years ago
  • 7.0.4                                ...           2 years ago
  • 7.0.3                                ...           2 years ago
  • 7.0.2                                ...           2 years ago
  • 7.0.1                                ...           2 years ago
  • 7.0.0                                ...           2 years ago
  • 6.0.3                                ...           2 years ago
  • 6.0.2                                ...           2 years ago
  • 6.0.1                                ...           2 years ago
  • 6.0.0                                ...           2 years ago
  • 5.2.1                                ...           2 years ago
  • 5.2.0                                ...           2 years ago
  • 5.1.4                                ...           2 years ago
  • 5.1.3                                ...           2 years ago
  • 5.1.2                                ...           2 years ago
  • 5.1.1                                ...           2 years ago
  • 5.1.0                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.1.6                                ...           2 years ago
  • 4.1.5                                ...           2 years ago
  • 4.1.4                                ...           2 years ago
  • 4.1.3                                ...           2 years ago
  • 4.1.2                                ...           2 years ago
  • 4.1.1                                ...           2 years ago
  • 4.1.0                                ...           2 years ago
  • 4.0.0                                ...           2 years ago
  • 3.0.3                                ...           2 years ago
  • 3.0.2                                ...           2 years ago
  • 3.0.1                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Downloads
Today 82
This Week 3,473
This Month 14,525
Last Day 226
Last Week 4,451
Last Month 17,390
Dependencies (2)
Dev Dependencies (5)
Dependents (827)

Copyright 2014 - 2016 © taobao.org |