Black Lives Matter.
Emotion
  • Docs
  • Community
  • GitHub
  • Slack
  • Spectrum
  • v10 Docs

Getting Started

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

Advanced

  • Keyframes
  • Server Side Rendering
  • Attaching Props
  • Theming
  • Labels
  • Class Names
  • CacheProvider

Tooling

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

Packages

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

Posts

  • Emotion 11
  • Migrating to Emotion 10

@emotion/styled

✏️ Edit this page

The styled API for @emotion/react

Install

yarn add @emotion/react @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.