Išplėstinis komponentų stiliavimas React

Tarkime, kad turime React komponentą Block ir jame sukūrėme naudojant Styled Components su stilizuotus komponentus Button ir Container:

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

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

Dabar įsivaizduokime, kad mums reikia dar vieno komponento Button, tik su balta mygtuko teksto spalva ir žaliu fono.

Norėdami tai padaryti, mums pakanka ant mūsų komponento Button bazės sukurti naują komponentą MdButton ir jame nurodyti tik tas savybes, kurias norime pakeisti:

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

Block komponente išdėstykime visus mūsų stilizuotus komponentus:

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

Sukurkite tuščią React komponentą Block1. Naudodami Styled Components sukurkite jame stilizuotą div su plotiu ir aukščiu 150px, geltonu fonu, ir krašto linijos plotiu 2px, pavadinkite jį DIVA.

Ant ankstesnėje užduotyje sukurto div bazės sukurkite tokį patį div DIVB, tik su žaliu fonu ir krašto linijos plotiu 3px.

Block1 komponente sukurkite div Container. Jame išdėstykite du komponentus DIVA ir tarp jų vieną DIVB, kuriuos sukūrėte ankstesnėse šios pamokos užduotyse.