Komponentide laiendatud stiilimine Reactis

Oletame, et meil on Reacti komponent Block ja oleme selles loonud Styled Components'iga stiilistatud komponendid Button ja Container:

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

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

Nüüd kujutame ette, et vajame veel ühte komponenti Button, kuid valge nuputekstiga ja rohelise taustaga.

Selleks piisab, kui me meie olemasolevale komponendile Button tuginedes loome uue komponendi MdButton ja kirjeldame selles ainult need omadused, mida soovime muuta:

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

Paigutame komponenti Block kõik meie stiilistatud komponendid:

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

Loo tühi Reacti komponent Block1. Kasutades Styled Components'i, loo selles stiilistatud div laiusega ja kõrgusega 150px, kollase taustavärviga, ja piirjoone laiusega 2px, ning pane sellele nimeks DIVA.

Eelmise ülesande divi põhjal loo sarnane div DIVB, kuid rohelise taustavärviga ja piirjoone laiusega 3px.

Komponendis Block1 loo div Container. Paiguta sellesse kaks komponenti DIVA ja nende vahele üks DIVB, mille lõite varasemates selle õppetüki ülesannetes.