Laajennettu komponenttien muotoilu Reactissa

Oletetaan, että meillä on React-komponentti Block ja olemme luoneet siinä Styled Components -kirjastolla muotoillut komponentit 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;
`;

Kuvittele nyt, että tarvitsemme toisen Button-komponentin, mutta valkoisella napin tekstillä ja vihreällä taustalla.

Tätä varten meidän tarvitsee vain perustaa komponenttiimme Button uusi komponentti MdButton ja määritellä siihen vain ne ominaisuudet, jotka haluamme muuttaa:

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

Sijoitetaan Block-komponenttiin kaikki muotoillut komponenttimme:

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

Luo tyhjä React-komponentti Block1. Styled Components -kirjaston avulla luo siihen muotoillun divin, jonka leveys ja korkeus on 150px, keltainen tausta, ja reunuksen leveys 2px. Nimeä se DIVA:ksi.

Edellisen tehtävän divin pohjalta luo samanlainen div DIVB, mutta vihreällä taustalla ja reunuksen leveydellä 3px.

Luo Block1-komponenttiin div Container. Sijoita siihen kaksi DIVA-komponenttia ja niiden väliin yksi DIVB-komponentti, jotka loit aikaisemmissa tämän oppitunnin tehtävissä.