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

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

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

---

---

विंडोज़ 10 सोचता है कि प्रिंटर ऑफ़लाइन है

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

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

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

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
} 

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

import styles from "./styles.module.js" 

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

---

---

class="styles.btn" 

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

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

---

---

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

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

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

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
} 

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
} 

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

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

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

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

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

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

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

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

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

npx create-react-app react-css-modules 

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

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

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

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

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
} 

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 

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

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
} 

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

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

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

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
} 

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

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
} 

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

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

विंडोज़ 8.1 में बायोस में कैसे जाएं

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
} 

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

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
} 

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

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

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