Користење на пропси со Styled Components во React

Од претходната лекција научивме дека стилизираните со помош на библиотеката Styled Components компоненти може да се користат како обични React компоненти. Во оваа лекција ќе видиме дека овде на сличен начин ќе работат и пропсите.

Да претпоставиме дека имаме React компонента Block и во неа креиравме стилизирани со помош на Styled Components компоненти Input и Container:

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

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

Поставете ги три компоненти Input во Container:

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

Користејќи пропси, можеме да поставуваме во компонентите различни атрибути. Ајде да му ги поставиме на вториот инпут атрибутите placeholder и type со вредности name и text, соодветно, а на третиот инпут кај атрибутот type да ја поставиме вредноста password:

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