Коришћење пропса са 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>
  );
}