Styled Components के साथ React में प्रॉप्स का उपयोग

पिछले पाठ से हमने सीखा कि Styled Components लाइब्रेरी का उपयोग करके स्टाइल किए गए कॉम्पोनेंट्स को सामान्य React कॉम्पोनेंट्स की तरह इस्तेमाल किया जा सकता है। इस पाठ में हम देखेंगे कि यहाँ प्रॉप्स भी इसी तरह काम करेंगे।

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

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

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

तीन Input कॉम्पोनेंट्स को Container में रखें:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

प्रॉप्स का उपयोग करके, हम कॉम्पोनेंट्स में विभिन्न एट्रिब्यूट्स सेट कर सकते हैं। आइए दूसरे इनपुट में placeholder और type एट्रिब्यूट्स को क्रमशः name और text वैल्यूज़ के साथ सेट करें, और तीसरे इनपुट में type एट्रिब्यूट को password वैल्यू सेट करें:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

एक खाली React कॉम्पोनेंट Block बनाएं, इसमें एक div बनाएं जिसमें तीन बटन हों। Styled Components लाइब्रेरी का उपयोग करके, इस div और बटनों को स्टाइल करें। प्रॉप्स का उपयोग करके, पहले बटन को डिसेबल करें, और तीसरे बटन का टाइप reset बनाएं।