Utilisation des props dans le rendu conditionnel avec Styled Components dans React

Les props peuvent également être utilisées pour le rendu conditionnel. Prenons le composant React Block avec lequel nous avons travaillé lors de la leçon précédente.

Faisons en sorte que l'arrière-plan de notre première entrée soit jaune, et vert pour les autres entrées. Pour cela, ajoutons une ligne supplémentaire dans les styles du composant Input, ce qui donnera :

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

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

Ajoutons la prop first à la première entrée :

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

En utilisant le rendu conditionnel présenté dans la théorie de la leçon, modifiez le code de la solution du problème de la leçon précédente afin que, en présence de la prop warn, le texte du bouton soit rouge et son arrière-plan jaune, et sans celle-ci - un arrière-plan vert et un texte blanc. Transmettez warn au deuxième bouton.