Utilizzo delle Props con Styled Components in React

Dalla lezione precedente abbiamo appreso che i componenti stilizzati utilizzando la libreria Styled Components possono essere utilizzati come normali componenti React. In questa lezione vedremo che qui le props funzionano in modo simile.

Supponiamo di avere un componente React Block e al suo interno abbiamo creato componenti stilizzati utilizzando Styled Components: Input e Container:

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

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

Posizioniamo tre componenti Input in Container:

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

Utilizzando le props, possiamo impostare nei componenti diversi attributi. Impostiamo al secondo input gli attributi placeholder e type con i valori name e text, rispettivamente, mentre al terzo input nell'attributo type impostiamo il valore password:

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