css Prop (Emotion)

Definition

Prop speciale d'Emotion qui permet d'appliquer des styles directement sur un element JSX sans creer un styled component. Accepte un objet ou un template literal.

Analogie

Ecrire une note directement sur l'element au lieu de creer une etiquette nommee.

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 element unique sans creer un styled component dedie.

Termes lies