Пропстарды 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>