Tagged Template Literals

Definition

Syntaxe JavaScript utilisant les backticks (styled.div`...`) qui permet d'ecrire du CSS reel dans JS. Le tag styled interprete le template et genere un composant React style.

Analogie

Un traducteur simultanee : tu parles CSS, il convertit en composant React en temps reel.

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

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

Termes lies