Emotion
  • Docs
  • Community
  • GitHub
  • Slack
  • Spectrum
  • v9 Docs

Getting Started

  • Introduction
  • Install
  • The css Prop
  • Styled Components
  • Composition
  • Object Styles
  • Nested Selectors
  • Media Queries
  • Global Styles

Advanced

  • Keyframes
  • Server Side Rendering
  • Attaching Props
  • Theming
  • Labels
  • Class Names
  • CacheProvider
  • Migrating to Emotion 10

Tooling

  • Babel Plugin
  • Babel Macros
  • Source Maps
  • Snapshot Testing
  • TypeScript

Packages

  • @emotion/core
  • @emotion/styled
  • @emotion/cache
  • emotion
  • babel-plugin-emotion
  • eslint-plugin-emotion
  • emotion-server
  • emotion-theming
  • jest-emotion
  • @emotion/native
  • @emotion/primitives
  • create-emotion
  • create-emotion-server
  • @emotion/babel-preset-css-prop

@emotion/styled

✏️ Edit this page

The styled API for @emotion/core

Install

yarn add @emotion/core @emotion/styled

Usage

import styled from '@emotion/styled'

let SomeComp = styled.div({
  color: 'hotpink'
})

let AnotherComp = styled.div`
  color: ${props => props.color};
`

render(
  <SomeComp>
    <AnotherComp color="green" />
  </SomeComp>
)

More documentation is available at https://emotion.sh/docs/styled.