Rozšírené štýlovanie komponentov v React

Predpokladajme, že máme React komponent Block a vytvorili sme v ňom pomocou Styled Components naštýlované komponenty Button a Container:

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

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

A teraz si predstavme, že potrebujeme ďalší komponent Button, ale s bielym textom tlačidla a zeleným pozadím.

Na to nám stačí na baze nášho komponentu Button vytvoriť nový komponent MdButton a zapísať v ňom len tie vlastnosti, ktoré chceme zmeniť:

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

Umiestnime v Block všetky naše naštýlované komponenty:

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

Vytvorte prázdny React komponent Block1. Pomocou Styled Components vytvorte v ňom naštýlovaný div so šírkou a výškou 150px, žltým pozadím, a šírkou okraja 2px, nazvite ho DIVA.

Na baze divu z predchádzajúcej úlohy vytvorte rovnaký div DIVB, len so zeleným pozadím a šírkou okraja 3px.

V Block1 vytvorte div Container. Umiestnite do neho dva komponenty DIVA a medzi nich jeden DIVB, ktoré ste vytvorili v predchádzajúcich úlohách k tejto lekcii.