Utilizzo delle Props con Styled Components in React

Dalla lezione precedente abbiamo appreso che i componenti stilizzati utilizzando la libreria Styled Components possono essere utilizzati come normali componenti React. In questa lezione vedremo che qui le props funzionano in modo simile.

Supponiamo di avere un componente React Block e al suo interno abbiamo creato componenti stilizzati utilizzando 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;
`;

Posizioniamo tre componenti Input in Container:

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

Utilizzando le props, possiamo impostare nei componenti diversi attributi. Impostiamo al secondo input gli attributi placeholder e type con i valori name e text, rispettivamente, mentre al terzo input nell'attributo type impostiamo il valore password:

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

Crea un componente React vuoto Block, al suo interno crea un div che conterrà tre pulsanti. Utilizzando la libreria Styled Components, stilizza questo div e i pulsanti. Utilizzando le props, disabilita il primo pulsante e rendi il terzo di tipo reset.