Utilisation des Props avec Styled Components dans React

De la leçon précédente, nous avons appris que les composants stylisés à l'aide de la bibliothèque Styled Components peuvent être utilisés comme des composants React ordinaires. Dans cette leçon, nous verrons que les props fonctionneront de manière similaire ici.

Supposons que nous ayons un composant React Block et que nous y ayons créé des composants stylisés à l'aide de Styled Components Input et Container :

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

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

Plaçons trois composants Input dans Container :

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

En utilisant les props, nous pouvons définir divers attributs sur les composants. Définissons pour le deuxième input les attributs placeholder et type avec les valeurs name et text, respectivement, et pour le troisième input, définissons la valeur password pour l'attribut type :

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

Créez un composant React vide Block, faites-y un div contenant trois boutons. À l'aide de la bibliothèque Styled Components, stylisez ce div et les boutons. En utilisant les props, désactivez le premier bouton, et donnez au troisième le type reset.