Χρήση Props στην Υποθετική Απόδοση με Styled Components στο React

Τα props μπορούν επίσης να χρησιμοποιηθούν για υποθετική απόδοση. Ας πάρουμε το React component Block, με το οποίο δουλέψαμε στο προηγούμενο μάθημα.

Ας κάνουμε το φόντο για την πρώτη εισόδου να είναι κίτρινο, και για τις άλλες εισόδους πράσινο. Για να το κάνουμε αυτό, στους στυλ για το component Input προσθέτουμε ακόμη μια γραμμή και θα γίνει:

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

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

Προσθέτουμε το prop first στην πρώτη είσοδο:

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