Napredno oblikovanje komponent v Reactu

Recimo, da imamo React komponento Block in smo v njej ustvarili z Styled Components oblikovane komponente Button in Container:

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

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

Zdaj pa si predstavljajmo, da potrebujemo še eno komponento Button, vendar z belo barvo besedila na gumbu in zelenim ozadjem.

Za to je dovolj, da na podlagi naše komponente Button ustvarimo novo komponento MdButton in v njej navedemo le tiste lastnosti, ki jih želimo spremeniti:

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

Postavimo v Block vse naše oblikovane komponente:

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

Ustvarite prazno React komponento Block1. Z Styled Components ustvarite v njej oblikovan div s širino in višino 150px, rumenim ozadjem, in širino roba 2px, poimenujte ga DIVA.

Na podlagi diva iz prejšnje naloge ustvarite enak div DIVB, vendar z zelenim ozadjem in širino roba 3px.

V Block1 ustvarite div Container. Postavite vanj dve komponenti DIVA in med njima eno DIVB, ki ste jih ustvarili v prejšnjih nalogah k tej lekciji.