रिएक्ट कंपोनेंट्स को स्टाइल करने के तरीके

रिएक्ट कंपोनेंट्स को स्टाइल करने के बहुत से अलग-अलग तरीके मौजूद हैं। यहाँ हम उनमें से कुछ बुनियादी तरीकों पर विचार करेंगे।

मानक दृष्टिकोण, जिसे हम लागू कर सकते हैं, जैसा कि सामान्य वेब पेजों को स्टाइल करने में करते हैं - वह है ग्लोबल CSS का उपयोग। यहाँ हम स्टाइल्स के साथ एक बाहरी साझा CSS फ़ाइल बनाते हैं। इस दृष्टिकोण में, सभी क्लास नाम वैश्विक स्कोप में होते हैं, जिससे उनके बीच टकराव हो सकता है। बहुत सारी छोटी CSS फ़ाइलें भी बनाई जा सकती हैं। यह दृष्टिकोण बड़े स्केलेबल एप्लिकेशन बनाने में कम प्रभावी है।

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

अगले कुछ तरीके, जिन पर हम विचार करेंगे - आधुनिक, लोकप्रियता हासिल कर रहे, प्रभावी स्टाइलिंग के तरीके हैं। ये वे तरीके हैं जिन्हें बड़े स्केलेबल रिएक्ट एप्लिकेशन्स की स्टाइलिंग के लिए अपनाने की सिफारिश की जाती है।

उनमें से पहला - लाइब्रेरी Styled Components का अनुप्रयोग, जो स्टाइलिंग के लिए टेम्पलेट स्ट्रिंग्स का उपयोग करती है। यह तरीका हमें JS कोड में सामान्य CSS लिखने की अनुमति देता है, उसकी सारी कार्यक्षमता का उपयोग करते हुए।

दूसरा तरीका - CSS मॉड्यूल्स का अनुप्रयोग। इस मामले में, CSS मॉड्यूल एक ऐसी CSS फ़ाइल है जिसमें डिफ़ॉल्ट रूप से सभी क्लास और एनिमेशन के नाम लोकल स्कोप में होते हैं, यानी वे केवल उस कंपोनेंट के अंदर ही उपलब्ध होते हैं, जो उसका उपयोग करता है।

इन दोनों अंतिम तरीकों में हम क्लास नामों के बीच टकराव से नहीं डर सकते, क्योंकि वे यूनिक होते हैं - लोकल स्कोप की अवधारणा का उपयोग किया जाता है। साथ ही इनके उपयोग से BEM मेथडोलॉजी की आवश्यकता समाप्त हो जाती है।

अगले पाठों में हम यहाँ दिए गए सभी तरीकों पर विस्तार से विचार करेंगे।