Коришћење пропса у условном рендеровању са Styled Components у React-у

Пропсе се може користити и за условно рендеровање. Узмимо React компонент Block, са којим смо радили у претходном уроку.

Учинимо тако да нам позадина за први инпут буде жута, а за остале инпуте зелена. За то, у стилове за компонент Input додајмо још један ред и добићемо:

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

Додајмо пропс first првом инпуту:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>