DocumentationCommunityGitHubSlackSpectrum

Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles

Advanced

KeyframescxServer Side RenderingAttaching PropsThemingLabelsConfigurable ImportsInstances

Labels

Edit this page

css accepts a css property called label that will be appended to the end of the class name so it’s more readable. babel-plugin-emotion’s autoLabel option will add these labels automatically based on the variable name and other information so you don’t need to manually specify them.

import { css } from 'emotion'

const className = css`
  color: hotpink;
  label: some-name;
`

const anotherClassName = css({
  color: 'lightgreen',
  label: 'another-name'
})

render(
  <div>
    <div className={className}>{className}</div>
    <div className={anotherClassName}>
      {anotherClassName}
    </div>
  </div>
)
css-a281on-some-name
css-1i3s76n-another-name
Previous Page
Theming