Stylisation avancée des composants dans React

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

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

const Button = styled.input`
	background-color: orange;
	font-size: 18px;
	margin: 5px;
`;

Imaginons maintenant que nous ayons besoin d'un autre composant Button, mais avec un texte de bouton blanc et un fond vert.

Pour cela, il nous suffit de créer un nouveau composant MdButton basé sur notre composant Button et d'y spécifier uniquement les propriétés que nous souhaitons modifier :

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

Plaçons dans Block tous nos composants stylisés :

function Block() {
	return (
		<Container>
			<Button>btn0</Button>
			<MdButton>btn1</MdButton>
		</Container>
	);
}

Créez un composant React vide Block1. À l'aide de Styled Components, créez y un div stylisé d'une largeur et d'une hauteur de 150px, avec un fond jaune, et une largeur de bordure de 2px, nommez-le DIVA.

Sur la base du div de la tâche précédente, créez un div identique DIVB, mais avec un fond vert et une largeur de bordure de 3px.

Dans Block1, créez un div Container. Placez-y deux composants DIVA et entre eux un DIVB, créés par vous dans les tâches précédentes de cette leçon.