Uso de Props con Styled Components en React

De la lección anterior, aprendimos que los componentes estilizados usando la biblioteca Styled Components se pueden usar como componentes React normales. En esta lección, veremos que las props funcionarán de manera similar aquí.

Supongamos que tenemos un componente React Block y hemos creado en él componentes estilizados usando Styled Components: Input y Container:

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

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

Coloquemos tres componentes Input en Container:

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

Usando props, podemos establecer varios atributos en los componentes. Establezcamos en el segundo input los atributos placeholder y type con los valores name y text, respectivamente, y en el tercer input, para el atributo type, establezcamos el valor password:

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