Tagged Template Literals

Styled-Components 🟡 Mid

Définition

Syntaxe JavaScript utilisant les backticks (styled.div`...`) qui permet d'écrire du CSS réel dans JS. Le tag styled interprété le template et génère un composant React style.

Analogie

Un traducteur simultanée : tu parles CSS, il convertit en composant React en temps réel.

Exemple de code

import styled from 'styled-components'

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: ${({ $primary }) => $primary ? 'blue' : 'gray'};
  color: white;
  border-radius: 4px;
  &:hover { opacity: 0.9; }
`

Cas d'usage

Écrire du CSS scope au composant directement dans le fichier JS/TS.

Termes liés

#styling#interview#css-in-js