Utilizzo delle props nel rendering condizionale con Styled Components in React

Le props possono essere utilizzate anche per il rendering condizionale. Prendiamo il componente React Block con cui abbiamo lavorato nella lezione precedente.

Facciamo in modo che lo sfondo per il primo input sia giallo, e per gli altri input verde. Per fare ciò, aggiungiamo un'altra riga agli stili per il componente Input e otteniamo:

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

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

Aggiungiamo la prop first al primo input:

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

Utilizzando il rendering condizionale fornito nella teoria della lezione, modificate il codice della soluzione del problema della lezione precedente in modo che, in presenza della prop warn, il testo del pulsante sia rosso e il suo sfondo sia giallo, mentre senza di essa - sfondo verde e testo bianco. Passate warn al secondo pulsante.