React-da komponentleri giňişleýin stilizasiýa

Bizde React komponenti Block bardyr we biz onda Styled Components ýardamy bilen stilizirlenen Button we Container komponentlerini döretdik diýip gürläň:

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

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

Indi bolsa, bizde ýene bir Button komponenti gerek, ýöne aky tekst we ýaşyl fon bilen.

Bun üçin, bizim Button komponentimiziň esasynda täze MdButton komponentini döretmek we onda diňe üýtgetmek isleýän häsiýetlerimizi ýazmak ýeterlikdir:

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

Block komponentinde ähli stilizirlenen komponentlerimizi ýerleşdireýliň:

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

Boş React komponentini Block1 dörediň. Styled Components ýardamy bilen onda ini 150px we beýikligi 150px bolan, sary fon bilen, we çäginiň ini 2px bolan stilizirlenen div dörediň, ona DIVA diýip at beriň.

Öňki mesele diviniň esasynda şuňa meňzeş div DIVB dörediň, ýöne ýaşyl fon we çäginiň ini 3px bilen.

Block1 komponentinde Container divini dörediň. Ona bu sapakdaky öňki meselelerde döreden iki sany DIVA komponentini we olaryň arasynda bir sany DIVB komponentini ýerleşdiriň.