Uporaba props v pogostnem upodabljanju s Styled Components v Reactu

Props lahko uporabimo tudi za pogojno upodabljanje. Vzemimo React komponento Block, s katero smo delali v prejšnji lekciji.

Naredimo tako, da bo ozadje za prvi input rumeno, za druge inpute pa zeleno. Za to v stile za komponento Input dodajmo še eno vrstico in dobimo:

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

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

Dodajmo prop first prvemu inputu:

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

Задание 1

Z uporabo pogojnega upodabljanja, predstavljenega v teoretičnem delu lekcije, spremenite kodo rešitve naloge iz prejšnje lekcije tako, da bo ob prisotnosti props warn besedilo gumba rdeče in njegovo ozadje rumeno, brez njega pa - zeleno ozadje in belo besedilo. Posredujte warn drugemu gumbu.