Utilisation des Props avec Styled Components dans React

De la leçon précédente, nous avons appris que les composants stylisés à l'aide de la bibliothèque Styled Components peuvent être utilisés comme des composants React ordinaires. Dans cette leçon, nous verrons que les props fonctionneront de manière similaire ici.

Supposons que nous ayons un composant React Block et que nous y ayons créé des composants stylisés à l'aide de Styled Components Input et Container :

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Input = styled.input`
  margin: 5px;
  font-size: 18px;
`;

Plaçons trois composants Input dans Container :

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

En utilisant les props, nous pouvons définir divers attributs sur les composants. Définissons pour le deuxième input les attributs placeholder et type avec les valeurs name et text, respectivement, et pour le troisième input, définissons la valeur password pour l'attribut type :

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input placeholder="name" type="text" />
      <Input type="password" />
    </Container>
  );
}