css`` Helper

Définition

Helper qui permet de définir des blocs de CSS réutilisables avec interpolations. Nécessaire pour les interpolations conditionnelles a l'intérieur des styled components.

Analogie

Un paragraphe pre-écrit que tu peux insérer dans n'importe quelle lettre.

Exemple de code

import styled, { css } from 'styled-components'

const truncate = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`
const Title = styled.h2`
  font-size: 1.5rem;
  ${truncate}
`

Cas d'usage

Extraire et réutiliser des blocs de styles communs entre plusieurs styled components.

Termes liés