Wykorzystanie props w renderowaniu warunkowym ze Styled Components w React

Props można wykorzystywać również do warunkowego renderowania. Weźmy komponent React Block, z którym pracowaliśmy na poprzedniej lekcji.

Sprawmy, aby tło dla pierwszego inputa było żółte, a dla innych inputów zielone. W tym celu, do stylów dla komponentu Input dodajmy jeszcze linijkę i otrzymamy:

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

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

Dodajmy prop first pierwszemu inputowi:

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