Props-based Styling

Definition

Technique utilisant les props du composant pour modifier dynamiquement les styles. Permet de creer des variantes sans classes CSS supplementaires.

Analogie

Commander un cafe : tu dis 'grand, lait, sans sucre' et le barista adapte la recette.

Exemple de code

const Button = styled.button`
  padding: ${({ $size }) => $size === 'lg' ? '1rem 2rem' : '0.5rem 1rem'};
  background: ${({ $variant }) =>
    $variant === 'danger' ? 'red' : 'blue'};
  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
`
// <Button $size="lg" $variant="danger" />

Cas d'usage

Creer des composants avec plusieurs variantes (taille, couleur, etat) pilotees par les props.

Anti-pattern

Termes lies