Uso de Props con Styled Components en React

De la lección anterior, aprendimos que los componentes estilizados usando la biblioteca Styled Components se pueden usar como componentes React normales. En esta lección, veremos que las props funcionarán de manera similar aquí.

Supongamos que tenemos un componente React Block y hemos creado en él componentes estilizados usando Styled Components: Input y Container:

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

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

Coloquemos tres componentes Input en Container:

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

Usando props, podemos establecer varios atributos en los componentes. Establezcamos en el segundo input los atributos placeholder y type con los valores name y text, respectivamente, y en el tercer input, para el atributo type, establezcamos el valor password:

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

Cree un componente React vacío Block, haga en él un div que contenga tres botones. Usando la biblioteca Styled Components, dé estilo a este div y a los botones. Usando props, deshabilite el primer botón, y al tercero asígnele el tipo reset.