Utilizarea props-urilor în redarea condiționată cu Styled Components în React

Props-urile pot fi utilizate și pentru redarea condiționată. Să luăm componenta React Block cu care am lucrat în lecția anterioară.

Să facem astfel încât fundalul pentru prima casă de introducere să fie galben, iar pentru celelalte case de introducere să fie verde. Pentru aceasta, în stilurile pentru componenta Input adăugăm încă o linie și va rezulta:

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

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

Adăugăm prop-ul first primei case de introducere:

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

Folosind redarea condiționată, prezentată în partea teoretică a lecției, modificați codul soluției sarcinii din lecția anterioară astfel încât, atunci când există prop-ul warn, textul butonului să fie roșu și fundalul său să fie galben, iar fără acesta - fundal verde și text alb. Transmiteți warn celui de-al doilea buton.