as Prop (Polymorphism)

Définition

Prop spéciale qui change l'élément HTML rendu sans modifier les styles. Un Button styled.button peut être rendu comme un <a> avec as="a".

Analogie

Un acteur qui joue différents roles avec le même costume.

Exemple de code

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: blue;
  color: white;
`
// Rendu comme <a> avec les memes styles
<Button as="a" href="/page">Lien style</Button>
// Rendu comme un autre composant
<Button as={Link} to="/page">Nav</Button>

Cas d'usage

Réutiliser les styles d'un composant sur un élément HTML différent (button -> a, div -> section).

Termes liés