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 are especially useful with the css prop because you don’t need a css call like with string styles but object styles can also be used with styled.

Examples

With the css prop

/** @jsx jsx */
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      color: 'darkorchid',
      backgroundColor: 'lightgray'
    }}
  >
    This is darkorchid.
  </div>
)

This is darkorchid.

With `styled`

import styled from '@emotion/styled'

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

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

Child Selectors

/* @jsx jsx */
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      color: 'darkorchid',
      '& .name': {
        color: 'orange'
      }
    }}
  >
    This is darkorchid.
    <div className="name">This is orange</div>
  </div>
)

This is darkorchid.

This is orange

Media Queries

/** @jsx jsx */
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      color: 'darkorchid',
      '@media(min-width: 420px)': {
        color: 'orange'
      }
    }}
  >
    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.

/** @jsx jsx */
import { jsx } from '@emotion/react'

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

This has 8px of padding and a z-index of 200.

Arrays

Nested arrays are flattened.

/** @jsx jsx */
import { jsx } from '@emotion/react'

render(
  <div
    css={[
      { color: 'darkorchid' },
      { backgroundColor: 'hotpink' },
      { padding: 8 }
    ]}
  >
    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.

/** @jsx jsx */
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      background: [
        'red',
        'linear-gradient(#e66465, #9198e5)'
      ],
      height: 100
    }}
  >
    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

With `css`

You can also use css with object styles.

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

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

render(
  <div>
    <p css={hotpink}>This is hotpink</p>
  </div>
)

This is hotpink

Composition

Learn more composition in Emotion.

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

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

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

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

render(
  <div>
    <p css={hotpink}>This is hotpink</p>
    <button css={hotpinkHoverOrFocus}>
      This is hotpink on hover or focus
    </button>
    <p css={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>
)