React में CSS modules में कक्षाओं के लिए composes कमांड

इस पाठ में हम CSS modules में एक वर्ग की CSS शैलियों को दूसरे में पुनः उपयोग करने के लिए एक बहुत ही उपयोगी तरीका देखेंगे।

आइए buttons एप्लिकेशन पर वापस आते हैं, जो हमने पिछले पाठों में बनाया था। आइए Buttons.module.css फ़ाइल पर एक नज़र डालें:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

मान लीजिए, हम चाहते हैं कि सभी बटनों में समान गोलाकार corners और फ़ॉन्ट आकार हो। बेशक, प्रत्येक वर्ग में समान गुणों को डुप्लिकेट किया जा सकता था। लेकिन CSS modules की composes कमांड के लिए धन्यवाद, हम अलग तरीके से कार्य करेंगे।

शुरुआत के लिए, आइए एक और वर्ग बनाएं, उदाहरण के लिए common-btn, जिसमें हम ये समान गुण रखेंगे। और इस वर्ग के गुणों को अन्य में लागू करने के लिए, उनमें इस सिंटैक्स का उपयोग करने की आवश्यकता है:

selector {
	composes: class name;
}

अब हमारे Buttons.module.css का कोड इस तरह दिखेगा:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

अपना React एप्लिकेशन inputs लें, जो आपने पिछले पाठों के कार्यों में बनाया था। सभी इनपुट के लिए समान मानों के साथ कुछ समान CSS शैलियाँ जोड़ें। एक अतिरिक्त वर्ग बनाएं जिसमें ये शैलियाँ लिखी गई हों। composes का उपयोग करके उन्हें इनपुट के लिए अन्य सभी वर्गों में लागू करें।