React में घटकों की उन्नत स्टाइलिंग

मान लीजिए कि हमारे पास एक React घटक Block है और हमने इसमें Styled Components का उपयोग करके स्टाइल किए गए घटक Button और Container बनाए हैं:

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

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

और अब कल्पना कीजिए कि हमें एक और घटक Button चाहिए, लेकिन बटन के सफेद टेक्स्ट और हरे बैकग्राउंड के साथ।

इसके लिए, हमारे मौजूदा घटक Button के आधार पर एक नया घटक MdButton बनाना काफी है और उसमें केवल वे गुण लिखने हैं जिन्हें हम बदलना चाहते हैं:

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

Block में हमारे सभी स्टाइल किए गए घटकों को रखें:

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

एक खाली React घटक Block1 बनाएं। Styled Components की सहायता से इसमें 150px चौड़ाई और ऊंचाई वाला एक स्टाइल किया हुआ div बनाएं, पीले बैकग्राउंड के साथ, और 2px बॉर्डर चौड़ाई के साथ, इसका नाम DIVA रखें।

पिछले कार्य के div के आधार पर एक समान div DIVB बनाएं, लेकिन हरे बैकग्राउंड और 3px की बॉर्डर चौड़ाई के साथ।

Block1 में एक div Container बनाएं। इसमें आपके द्वारा इस पाठ के पिछले कार्यों में बनाए गए दो घटक DIVA और उनके बीच एक DIVB रखें।