Props-larin Styled Components-da Sherti Renderde Istifadesi

Props-lar sherti render ucun de istifade edile biler. Gelin evvelki dersde ishlediyimiz React komponenti Block-ni goturek.

Gelin birinci input ucun fonu sari, diger inputlar ucun ise yashil edek. Bunun ucun Input komponentinin stilinde bir setir elave edek ve bele aliriq:

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

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

Birinci inputa first props-unu elave edek:

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