Reactda Komponentlarni Kengaytirilgan Uslublash

Faraz qilaylik, bizda React komponenti Block bor va biz unda Styled Components yordamida uslublangan Button va Container komponentlarini yaratdik:

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

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

Endi tasavvur qilaylik, bizga yana bir Button komponenti kerak, lekin tugma matni oq va orqa fon yashil rangda.

Buning uchun bizning Button komponentimiz asosida yangi MdButton komponentini yaratishimiz va unda faqat o'zgartirmoqchi bo'lgan xususiyatlarimizni ko'rsatishimiz kifoya:

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

Block ichida barcha uslublangan komponentlarimizni joylashtiramiz:

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

Bo'sh React komponenti Block1 yarating. Styled Components yordamida unda 150px eni va balandligida, sariq orqa fon, 2px chegarasi qalinligida bo'lgan uslublangan div yarating, uning nomi DIVA bo'lsin.

Oldingi vazifadagi div asosida shunday div DIVB yarating, lekin orqa fon yashil va chegarasi qalinligi 3px bo'lsin.

Block1 ichida Container divini yarating. Uning ichiga siz ushbu dars uchun oldingi vazifalarda yaratgan ikkita DIVA komponentini va ularning orasiga bitta DIVB komponentini joylashtiring.