Používanie props pri podmienenom renderovaní so Styled Components v Reacte

Props sa dajú použiť aj pre podmienené renderovanie. Zoberme si React komponent Block, s ktorým sme pracovali na predchádzajúcej lekcii.

Urobme to tak, aby bol pre prvý input pozadie žlté a pre ostatné inputs zelené. Preto do štýlov pre komponent Input pridajme ešte jeden riadok a vyjde nám:

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

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

Pridajme prop first prvému inputu:

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