Uitgebreide stilisering van componenten in React

Stel dat we een React-component Block hebben en daarin gestileerde componenten hebben gemaakt met Styled Components: Button en Container:

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

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

Stel je nu voor dat we nog een component Button nodig hebben, maar met witte tekst op de knop en een groene achtergrond.

Hiervoor kunnen we op basis van onze component Button een nieuwe component MdButton maken en daarin alleen de eigenschappen specificeren die we willen wijzigen:

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

Laten we in Block al onze gestileerde componenten plaatsen:

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

Maak een lege React-component Block1. Maak daarin met Styled Components een gestileerde div met een breedte en hoogte van 150px, een gele achtergrond, en een randdikte van 2px, noem deze DIVA.

Maak op basis van de div uit de vorige taak een zelfde div DIVB, maar met een groene achtergrond en een randdikte van 3px.

Maak in Block1 een div Container. Plaats daarin twee componenten DIVA en daartussen één DIVB, die je in de vorige taken voor deze les hebt gemaakt.