Uso de Props na Renderização Condicional com Styled Components no React

As props também podem ser usadas para renderização condicional. Vamos pegar o componente React Block com o qual trabalhamos na lição anterior.

Vamos fazer com que o fundo para a primeira entrada seja amarelo e para as outras entradas seja verde. Para isso, adicione mais uma linha aos estilos para o componente Input e ficará assim:

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

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

Vamos adicionar a prop first à primeira entrada:

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

Usando a renderização condicional fornecida na teoria da lição, modifique o código da solução da tarefa da lição anterior para que, quando a prop warn estiver presente, o texto do botão seja vermelho e seu fundo seja amarelo, e sem ela - fundo verde e texto branco. Passe warn para o segundo botão.