DocumentationCommunityGitHubSlackSpectrum

Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles

Object Styles

Edit this page

Writing styles with objects is a powerful pattern built directly into the core of emotion. Instead of writing css properties in kebab-case like regular css, you write them in camelCase, for example background-color would be backgroundColor. Object styles work with all functions that accept string styles. (css, styled, keyframes and injectGlobal)

Examples

With css

import { css } from 'emotion'

const className = css({
  color: 'darkorchid',
  backgroundColor: 'lightgray'
})

render(<div className={className}>This is darkorchid.</div>)
This is darkorchid.

With styled

styled is a thin wrapper around css and accepts the same arguments. More ways to use styled can be found here.

import styled from 'react-emotion'

const Button = styled('button')(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
)

render(
  <Button fontSize={16}>
    This is a darkorchid button.
  </Button>
)

Child Selectors

import { css } from 'emotion'

const className = css({
  color: 'darkorchid',
  '& .name': {
    color: 'orange'
  }
})

render(
  <div className={className}>
    This is darkorchid.<div className="name">This is orange</div>
  </div>
)
This is darkorchid.
This is orange

Media Queries

import { css } from 'emotion'

const className = css({
  color: 'darkorchid',
  '@media(min-width: 420px)': {
    color: 'orange'
  }
})

render(
  <div className={className}>
    This is orange on a big screen and darkorchid on a small
    screen.
  </div>
)
This is orange on a big screen and darkorchid on a small screen.

Numbers

When numbers are the value of a css property, px is appended to the number unless it is a css property that is unitless.

import { css } from 'emotion'

const className = css({
  padding: 8,
  zIndex: 200
})

render(
  <div className={className}>
    This has 8px of padding and a z-index of 200.
  </div>
)
This has 8px of padding and a z-index of 200.

Multiple Arguments

import { css } from 'emotion'

const className = css(
  {
    color: 'darkorchid'
  },
  {
    backgroundColor: 'hotpink'
  },
  {
    padding: 8
  }
)

render(
  <div className={className}>
    This is darkorchid with a hotpink background and 8px of
    padding.
  </div>
)
This is darkorchid with a hotpink background and 8px of padding.

Arrays

Nested arrays are flattened.

import { css } from 'emotion'

const className = css([
  {
    color: 'darkorchid'
  },
  {
    backgroundColor: 'hotpink'
  },
  {
    padding: 8
  }
])

render(
  <div className={className}>
    This is darkorchid with a hotpink background and 8px of
    padding.
  </div>
)
This is darkorchid with a hotpink background and 8px of padding.

Fallbacks

Define fallback values for browsers that don’t support features with arrays.

import { css } from 'emotion'

const className = css({
  background: ['red', 'linear-gradient(#e66465, #9198e5)'],
  height: 100
})

render(
  <div className={className}>
    This has a gradient background in browsers that support
    gradients and is red in browsers that don't support
    gradients
  </div>
)
This has a gradient background in browsers that support gradients and is red in browsers that don't support gradients

Composition

Learn more composition in Emotion.

import { css } from 'emotion'

const hotpink = css({
  color: 'hotpink'
})

const hotpinkHoverOrFocus = css({
  ':hover,:focus': hotpink
})

const hotpinkWithBlackBackground = css(
  {
    backgroundColor: 'black',
    color: 'green'
  },
  hotpink
)

render(
  <div>
    <p className={hotpink}>This is hotpink</p>
    <button className={hotpinkHoverOrFocus}>
      This is hotpink on hover or focus
    </button>
    <p className={hotpinkWithBlackBackground}>
      This has a black background and is hotpink. Try moving
      where hotpink is in the css call and see if the color
      changes.
    </p>
  </div>
)

This is hotpink

This has a black background and is hotpink. Try moving where hotpink is in the css call and see if the color changes.

Previous Page
Composition