JSPM

  • Created
  • Published
  • Downloads 37193
  • Score
    100M100P100Q138165F
  • License MIT

The Next Generation of CSS-in-JS, for React projects.

Package Exports

  • react-emotion
  • react-emotion/dist/index.browser.cjs.js
  • react-emotion/dist/index.browser.esm.js
  • react-emotion/dist/index.cjs.js
  • react-emotion/dist/index.esm.js
  • react-emotion/macro

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 (react-emotion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-emotion

The styled API for emotion and react

react-emotion exports styled which allows you to use emotion to create React components that have styles attached to them, it also exports all of emotion's exports.

For more documentation on styled, read about it and try it out in the styled docs

npm install --save emotion react-emotion
// @live
import styled, { css } from 'react-emotion'
const SomeComponent = styled('div')`
  display: flex;
  background-color: ${props => props.color};
`

const AnotherComponent = styled('h1')(
  {
    color: 'hotpink'
  },
  props => ({ flex: props.flex })
)

render(
  <SomeComponent color="#DA70D6">
    <AnotherComponent flex={1}>Some text.</AnotherComponent>
  </SomeComponent>
)