Utilizarea props cu Styled Components în React

Din lecția anterioară am aflat că componentele stilizate cu ajutorul bibliotecii Styled Components pot fi utilizate ca componente React obișnuite. În această lecție vom vedea că aici, în mod similar, vor funcționa și props-urile.

Să presupunem că avem un component React Block și am creat în el componente stilizate cu ajutorul Styled Components: Input și Container:

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

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

Să plasăm trei componente Input în Container:

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

Folosind props-uri, putem seta în componente atribute diferite. Să setăm pentru al doilea input atributele placeholder și type cu valorile name și text, respectiv, iar pentru al treilea input la atributul type să setăm valoarea password:

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