हमारे फ्रंट एंड को पूरा करने के लिए लॉजिक टाइप करना शुरू करने से पहले यूआई पहला कदम है। इसलिए हम वांछित यूआई प्राप्त करने के लिए आवश्यक आवश्यक शैलियों के बाद मार्कअप लिखते हैं। मार्कअप लिखते समय हमें HTML टैग को संबोधित करने और उस तक पहुंचने और उसमें शैली जोड़ने के लिए सार्थक वर्ग नाम बनाने होंगे। सरल यूआई और विशिष्ट टैग के साथ हम यह काम कमोबेश आसानी से कर सकते हैं। दोहरावदार और जटिल यूआई लिखते समय, सार्थक और विशिष्ट नाम देना एक आपदा बन जाता है क्योंकि केवल कुछ सामान्य नाम होते हैं। इसलिए हम अलग-अलग घटकों के लिए घटक और स्टाइल शीट बनाते हैं। जैसा कि नीचे दिया गया है।

हम दो घटकों को देख सकते हैं, GreenContainer और RedContainer को src के अंदर घटक फ़ोल्डर से App.js में आयात किया जा रहा है। उनकी संबंधित स्टाइल शीट RedContainer.css और GreenContainer.css हैं, जो स्टाइल फ़ोल्डर से आयात की जाती हैं। आइए एक-एक करके दोनों घटकों और उनकी स्टाइल शीट को देखें।

पहला घटक, RedContainer.jsx

संबंधित स्टाइल शीट है - RedContainer.css

अब दूसरे घटक, GreenContainer.js पर एक नज़र डालें -

दूसरे घटक के लिए सीएसएस फ़ाइल, GreenContainer.css

दोनों स्टाइल शीट में उनके संबंधित घटकों के लिए अलग-अलग सीएसएस गुण होते हैं। तो अपेक्षित यूआई परिणाम एक स्क्रीन हो सकता है जहां दो ब्लॉक हैं, एक 150px भुजाओं वाला एक लाल वर्ग है और दूसरा 200px भुजाओं वाला एक हरा वर्ग है। आइए रेंडर किए गए रिएक्ट ऐप पर एक नजर डालें।

ऐसा क्यों हो रहा है? अंतिम कंटेनर से सीएसएस गुण दोनों कंटेनरों पर लागू किए गए हैं। आख़िर कैसे? इसका उत्तर यह है कि रिएक्ट ऐप के प्रस्तुत होने से ठीक पहले सभी स्टाइल शीट को एक सीएसएस फ़ाइल में संकलित किया जाता है, जहां एक ही नाम के दो वर्ग चयनकर्ता होते हैं - ".container" और यही कारण है कि अंतिम ".container" से सीएसएस गुण होते हैं। }" विश्व स्तर पर सभी कंटेनरों पर लागू किया गया है। सीएसएस मॉड्यूल का उपयोग करके इस समस्या को ठीक किया जा सकता है। सीएसएस मॉड्यूल सीएसएस फ़ाइलें हैं जहां सभी क्लास नाम डिफ़ॉल्ट रूप से स्थानीय रूप से दायरे में होते हैं। यह हमें निम्नलिखित तरीकों से मदद करता है

1) शैलियों को विशिष्ट घटकों में स्थानीयकृत करना इस वैश्विक दायरे के टकराव को रोकता है।

2) विभिन्न मॉड्यूल में समान वर्ग नामों के उपयोग की अनुमति दें और मॉड्यूलर स्टाइल को बढ़ावा दें।

मॉड्यूलर स्टाइलिंग का उपयोग करने के लिए हमें ".css" को ".module.css" से बदलना होगा और उन फ़ाइलों से 'स्टाइल्स' आयात करना होगा।

शैलियों को उनके संबंधित घटकों में आयात करना। रेडकंटेनर के लिए -

ग्रीनकंटेनर के लिए

सामान्य तौर पर, हम क्लासनाम को इस तरह एक स्ट्रिंग के रूप में लिखते हैं, यदि क्लासनाम "कंटेनर" है तो हम क्लासनाम = "कंटेनर" लिखेंगे। सीएसएस मॉड्यूल के लिए हम जेएसएक्स फाइलों में क्लास का नाम इस तरह className = {styles.container} लिखेंगे। अब आइए प्रतिक्रिया ऐप को देखें -

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