css Prop (Emotion)

Définition

Prop spéciale d'Émotion qui permet d'appliquer des styles directement sur un élément JSX sans créer un styled component. Accepte un objet ou un template literal.

Analogie

Écrire une note directement sur l'élément au lieu de créer une étiquette nommée.

Exemple de code

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

<div css={css`
  display: flex;
  padding: 1rem;
  &:hover { background: #f0f0f0; }
`}>
  Inline styles avec pseudo-selectors!
</div>

Cas d'usage

Styler rapidement un élément unique sans créer un styled component dédié.

Termes liés