Utilizando Props com Styled Components no React

Da lição anterior, aprendemos que componentes estilizados usando a biblioteca Styled Components podem ser usados como componentes React normais. Nesta lição, veremos que as props funcionam de maneira semelhante aqui.

Suponha que temos um componente React Block e criamos dentro dele componentes estilizados usando Styled Components Input e Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Vamos posicionar três componentes Input em Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Usando props, podemos definir vários atributos nos componentes. Vamos definir para o segundo input os atributos placeholder e type com os valores name e text, respectivamente, e para o terceiro input, no atributo type, definir o valor password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Crie um componente React vazio Block, faça nele uma div que contenha três botões. Usando a biblioteca Styled Components, estilize esta div e os botões. Usando props, desabilite o primeiro botão, e faça o terceiro ter o tipo reset.