as Prop (Polymorphism)

Definition

Prop speciale qui change l'element HTML rendu sans modifier les styles. Un Button styled.button peut etre rendu comme un <a> avec as="a".

Analogie

Un acteur qui joue differents roles avec le meme 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

Reutiliser les styles d'un composant sur un element HTML different (button -> a, div -> section).

Termes lies