Utilizando Props com Styled Components no React

Da lição anterior, aprendemos que componentes estilizados usando a biblioteca Styled Components podem ser usados como componentes React normais. Nesta lição, veremos que as props funcionam de maneira semelhante aqui.

Suponha que temos um componente React Block e criamos dentro dele componentes estilizados usando 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;
`;

Vamos posicionar três componentes Input em Container:

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

Usando props, podemos definir vários atributos nos componentes. Vamos definir para o segundo input os atributos placeholder e type com os valores name e text, respectivamente, e para o terceiro input, no atributo type, definir o valor password:

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