Brug af props i betinget rendering med Styled Components i React

Props kan også bruges til betinget rendering. Lad os tage React-komponenten Block, som vi arbejdede med i forrige lektion.

Lad os gøre sådan, at baggrunden for vores første inputfelt er gul, og for de andre inputfelter grøn. For at gøre dette tilføjer vi endnu en linje til stylingen for komponenten Input, og det bliver:

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

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

Lad os tilføje prop'en first til det første inputfelt:

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

Ved at bruge den betingede rendering, der er vist i lektionens teori, skal du modificere kodeløsningen fra opgaven i den forrige lektion, således at når prop'en warn er til stede, skal knappens tekst være rød og dens baggrund gul, og uden den - grøn baggrund og hvid tekst. Overfør warn til den anden knap.