CSS मॉड्यूल स्थानीय रूप से CSS वर्ग के नामों को स्कोप करने का एक तरीका प्रदान करते हैं। जब आप समान वर्ग नाम का उपयोग करते हैं तो आपको शैलियों को ओवरराइड करने के बारे में चिंता करने की ज़रूरत नहीं है।

पता लगाएँ कि CSS मॉड्यूल कैसे काम करते हैं, आपको उनका उपयोग क्यों करना चाहिए, और उन्हें एक प्रतिक्रिया परियोजना में कैसे लागू किया जाए।

सीएसएस मॉड्यूल क्या हैं?

सीएसएस मॉड्यूल डॉक्स एक सीएसएस मॉड्यूल को एक सीएसएस फ़ाइल के रूप में वर्णित करें जिसका वर्ग नाम डिफ़ॉल्ट रूप से स्थानीय रूप से स्कोप किया जाता है। इसका मतलब है कि आप अलग-अलग सीएसएस फाइलों में एक ही नाम से सीएसएस वैरिएबल को संबोधित कर सकते हैं।

आप सामान्य कक्षाओं की तरह ही CSS मॉड्यूल क्लासेस लिखते हैं। फिर संकलक सीएसएस को ब्राउज़र में भेजने से पहले अद्वितीय वर्ग नाम उत्पन्न करता है।

उदाहरण के लिए, Styles.modules.css नामक फ़ाइल में निम्न .btn वर्ग पर विचार करें:

.बीटीएन {
 चौड़ाई: 90px;
 ऊंचाई: 40 पीएक्स;
 पैडिंग: 10px 20px;
}

इस फ़ाइल का उपयोग करने के लिए, आपको इसे एक जावास्क्रिप्ट फ़ाइल में आयात करना होगा।

आयात शैलियों से "./styles.module.js"
instagram viewer

अब, .btn वर्ग को संदर्भित करने और इसे एक तत्व में उपलब्ध कराने के लिए, आप नीचे दिखाए गए अनुसार कक्षा का उपयोग करेंगे:

कक्षा="styles.btn"

निर्माण प्रक्रिया सीएसएस वर्ग को प्रारूप के अनूठे नाम से बदल देगी जैसे _शैलियाँ__btn_118346908।

वर्ग नामों की विशिष्टता का अर्थ है कि यदि आप विभिन्न घटकों के लिए समान वर्ग नाम का उपयोग करते हैं, तो भी वे आपस में नहीं टकराएंगे। आप अधिक कोड स्वतंत्रता की गारंटी दे सकते हैं क्योंकि आप किसी घटक की सीएसएस शैलियों को एक फ़ाइल में संग्रहीत कर सकते हैं, जो उस घटक के लिए विशिष्ट है।

यह डिबगिंग को सरल करता है, खासकर यदि आप कई स्टाइलशीट के साथ काम कर रहे हैं। आपको केवल किसी विशेष घटक के लिए CSS मॉड्यूल को ट्रैक करना होगा।

CSS मॉड्यूल आपको के माध्यम से कई वर्गों को संयोजित करने की अनुमति भी देते हैं तैयार करता खोजशब्द। उदाहरण के लिए, ऊपर दिए गए .btn वर्ग पर विचार करें। आप कंपोज़ का उपयोग करके उस वर्ग को अन्य वर्गों में "विस्तारित" कर सकते हैं।

सबमिट बटन के लिए, आपके पास हो सकता है:

.बीटीएन {
/* शैलियाँ */
}
।प्रस्तुत {
 रचना करता है: बीटीएन;
 पृष्ठभूमि-रंग: हरा;
 रंग:#एफएफएफएफएफएफ
}

यह .btn और .submit कक्षाओं को जोड़ती है। आप इस तरह से किसी अन्य CSS मॉड्यूल से शैलियों की रचना भी कर सकते हैं:

।प्रस्तुत {
 रचना करता है: प्राथमिक से "./colors.css"
 पृष्ठभूमि-रंग: हरा;
}

ध्यान दें कि आपको अन्य नियमों से पहले कंपोज़ नियम लिखना होगा।

प्रतिक्रिया में CSS मॉड्यूल का उपयोग कैसे करें

आप रिएक्ट में सीएसएस मॉड्यूल का उपयोग कैसे करते हैं यह इस बात पर निर्भर करता है कि आप रिएक्ट एप्लिकेशन कैसे बनाते हैं।

यदि आप create-react-app का उपयोग करते हैं, तो CSS मॉड्यूल बॉक्स से बाहर सेट किए जाते हैं। हालांकि, यदि आप स्क्रैच से एप्लिकेशन बनाने जा रहे हैं, तो आपको वेबपैक जैसे कंपाइलर के साथ सीएसएस मॉड्यूल को कॉन्फ़िगर करना होगा।

इस ट्यूटोरियल का अनुसरण करने के लिए, आपके पास यह होना चाहिए:

  • आपकी मशीन पर नोड स्थापित।
  • ES6 मॉड्यूल की एक बुनियादी समझ।
  • बुनियादी प्रतिक्रिया की समझ.

एक प्रतिक्रिया आवेदन बनाना

चीजों को सरल रखने के लिए, आप उपयोग कर सकते हैं क्रिएट-रिएक्शन-ऐप एक प्रतिक्रिया ऐप को मचान करने के लिए।

इस आदेश को चलाएँ एक नया रिएक्ट प्रोजेक्ट बनाएं प्रतिक्रिया-सीएसएस-मॉड्यूल कहा जाता है:

एनपीएक्स सृजन करना-प्रतिक्रिया-ऐप प्रतिक्रिया-सीएसएस-मॉड्यूल

यह प्रतिक्रिया के साथ आरंभ करने के लिए आवश्यक सभी निर्भरताओं के साथ प्रतिक्रिया-सीएसएस-मॉड्यूल नामक एक नई फ़ाइल उत्पन्न करेगा।

एक बटन घटक बनाना

आप इस चरण में Button.module.css नामक एक बटन घटक और एक CSS मॉड्यूल बनाएंगे। src फोल्डर में, कंपोनेंट्स नामक एक नया फोल्डर बनाएं। उस फोल्डर में Button नाम का एक और फोल्डर बनाएं। आप इस फ़ोल्डर में बटन घटक और उसकी शैलियों को जोड़ेंगे।

पर जाए स्रोत/घटक/बटन और Button.js बनाएं।

निर्यात करनाचूकसमारोहबटन() {
वापसी (
<बटन>प्रस्तुत करना</button>
 )
}

इसके बाद, Button.module.css नामक एक नई फ़ाइल बनाएं और निम्नलिखित जोड़ें।

.बीटीएन {
 चौड़ाई: 90px;
 ऊंचाई: 40 पीएक्स;
 पैडिंग: 10px 20px;
 सीमा-त्रिज्या: 4px;
 सीमा: कोई नहीं;
}

बटन घटक में इस वर्ग का उपयोग करने के लिए, इसे शैलियों के रूप में आयात करें और इसे इस तरह बटन तत्व के वर्ग नाम में संदर्भित करें:

आयात शैलियों से "./Button.module.css"
निर्यात करनाचूकसमारोहबटन() {
वापसी (
<बटन वर्गनाम={styles.btn}>प्रस्तुत करना</button>
 )
}

यह एक साधारण उदाहरण है जो दिखाता है कि एकल वर्ग का उपयोग कैसे करें। आप विभिन्न घटकों में शैलियों को साझा करना चाह सकते हैं या कक्षाओं को भी जोड़ सकते हैं। इसके लिए आप इस लेख में पहले बताए अनुसार कंपोज़ कीवर्ड का उपयोग कर सकते हैं।

रचना का उपयोग करना

सबसे पहले, निम्नलिखित कोड के साथ बटन घटक को संशोधित करें।

आयात शैलियों से "./Button.module.css"
निर्यात करनाचूकसमारोहबटन({प्रकार = "प्राथमिक", लेबल = "बटन"}) {
वापसी (
<बटन वर्गनाम = {शैलियाँ [प्रकार]}>{लेबल}</button>
 )
}

यह कोड एक प्रकार के मान को एक प्रोप के रूप में स्वीकार करके बटन घटक को अधिक गतिशील बनाता है। यह प्रकार बटन तत्व पर लागू वर्ग का नाम निर्धारित करेगा। तो यदि बटन सबमिट बटन है, तो कक्षा का नाम "सबमिट" होगा। यदि यह "त्रुटि" है, तो वर्ग का नाम "त्रुटि" होगा, और इसी तरह।

शुरुआत से प्रत्येक बटन के लिए सभी शैलियों को लिखने के बजाय कंपोज़ कीवर्ड का उपयोग करने के लिए निम्नलिखित को Button.module.css में जोड़ें।

.बीटीएन {
 चौड़ाई: 90px;
 ऊंचाई: 40 पीएक्स;
 पैडिंग: 10px 20px;
 सीमा-त्रिज्या: 4px;
 सीमा: कोई नहीं;
}
।मुख्य {
 रचना करता है: बीटीएन;
 रंग: #एफएफएफएफएफएफ;
 पीछे का रंग: #6E41E2;
}
.माध्यमिक {
 रचना करता है: बीटीएन;
 रंग: #6E41E2;
 पीछे का रंग: #एफएफएफएफएफएफ;
}

इस उदाहरण में, प्राथमिक वर्ग और माध्यमिक वर्ग btn वर्ग का उपयोग करते हैं। ऐसा करने से, आपको लिखने के लिए आवश्यक कोड की मात्रा कम हो जाती है।

आप इसे एक बाहरी सीएसएस मॉड्यूल के साथ और भी आगे ले जा सकते हैं जिसे कहा जाता है color.module.css, जिसमें अनुप्रयोग में प्रयुक्त रंग शामिल हैं। फिर आप इस मॉड्यूल का उपयोग अन्य मॉड्यूल में कर सकते हैं। उदाहरण के लिए, निम्न कोड के साथ घटक फ़ोल्डर की जड़ में color.module.css फ़ाइल बनाएँ:

.प्राथमिकबीजी {
 पीछे का रंग: #6E41E2
}
माध्यमिकबीजी {
 पीछे का रंग: #एफएफएफएफएफएफ
}
।प्राथमिक रंग {
 रंग: #एफएफएफएफएफएफ
}
.माध्यमिक रंग {
 रंग: #6E41E2
}

अब Button/Button.module.css फ़ाइल में, इस तरह उपरोक्त वर्गों का उपयोग करने के लिए प्राथमिक और माध्यमिक कक्षाओं को संशोधित करें:

।मुख्य {
 रचना करता है: बीटीएन;
 रचना करता है: प्राथमिक रंग से "../colors.module.css";
 रचना करता है: प्राथमिकबीजी से "../colors.module.css";
}
.माध्यमिक {
 रचना करता है: बीटीएन;
 रचना करता है: माध्यमिक रंग से "../colors.module.css";
 रचना करता है: माध्यमिकबीजी से "../colors.module.css";
}

सीएसएस मॉड्यूल के साथ सास

आप अपने कोडबेस की मॉड्युलैरिटी को बेहतर बनाने के लिए CSS मॉड्यूल का उपयोग कर सकते हैं। उदाहरण के तौर पर, आप एक बटन घटक के लिए एक साधारण सीएसएस वर्ग बना सकते हैं और रचना के माध्यम से सीएसएस कक्षाओं का पुन: उपयोग कर सकते हैं।

CSS मॉड्यूल के अपने उपयोग को सशक्त बनाने के लिए, Sass का उपयोग करें। Sass—सिंटैक्टली विस्मयकारी स्टाइल शीट—एक CSS प्रीप्रोसेसर है जो ढेर सारी सुविधाएँ प्रदान करता है। उनमें नेस्टिंग, वैरिएबल और इनहेरिटेंस के लिए समर्थन शामिल है जो सीएसएस में उपलब्ध नहीं हैं। Sass के साथ, आप अपने एप्लिकेशन में अधिक जटिल सुविधाएँ जोड़ सकते हैं।