Použití props při podmíněném renderování se Styled Components v Reactu

Props lze použít i pro podmíněné renderování. Vezměme React komponentu Block, se kterou jsme pracovali v předchozí lekci.

Uděláme to tak, aby pozadí pro první input bylo žluté a pro ostatní inputy zelené. K tomu přidáme do stylů pro komponentu Input ještě jeden řádek a vyjde:

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

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

Přidáme prop first prvnímu inputu:

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