css`` Helper

Definition

Helper qui permet de definir des blocs de CSS reutilisables avec interpolations. Necessaire pour les interpolations conditionnelles a l'interieur des styled components.

Analogie

Un paragraphe pre-ecrit que tu peux inserer 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 reutiliser des blocs de styles communs entre plusieurs styled components.

Termes lies