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

स्टाइल-घटकों का उपयोग करके, आप घटक-संचालित आर्किटेक्चर को बनाए रख सकते हैं जिसे रिएक्ट पहले से ही पुष्ट करता है। लेकिन पुस्तकालय में कुछ कमियां भी हैं।

स्टाइल वाले घटक कैसे काम करते हैं

स्टाइल-घटक सीएसएस-इन-जेएस पुस्तकालय आपको अपनी घटक फाइलों के अंदर सीएसएस लिखने की अनुमति देता है। इसका सिंटैक्स CSS जैसा ही है, इसलिए इसे चुनना बहुत आसान है। यह जावास्क्रिप्ट डेवलपर्स के लिए एक आदर्श मध्य मैदान है जो शुद्ध सीएसएस से दूर रहते हैं।

यह देखने के लिए कि यह कैसे काम करता है, निम्नलिखित शीर्षक घटक पर विचार करें जो एक h1 तत्व प्रस्तुत करता है।

स्थिरांक शीर्षक = स्टाइल.h1`
फ़ॉन्ट आकार: 1.5em;
 पाठ-संरेखण: केंद्र;
 लाल रंग;
`;

आप किसी भी अन्य प्रतिक्रिया घटक की तरह इस घटक का उपयोग कर सकते हैं।

स्थिरांक होम = () => {
वापसी (
<शीर्षक>एक स्टाइल घटक शीर्षक</Title>
	)
}

यह बहुत शक्तिशाली भी है क्योंकि इससे प्रॉप्स और स्टेट के साथ काम करना आसान हो जाता है।

instagram viewer

उदाहरण के लिए, इस घटक का रंग और पृष्ठभूमि सहारा पर निर्भर करती है।

आयात स्टाइल से "स्टाइल-घटक";
स्थिरांक बटन = स्टाइल.बटन`
गद्दी: 0.8rem 1.6rem;
 पृष्ठभूमि-रंग: ${(प्रॉप्स) => (प्रॉप्स.प्राथमिक? "बैंगनी": "सफेद")};
 सीमा: 1पीएक्स ठोस #00000;
 रंग: ${(प्रॉप्स) => (प्रॉप्स.प्राथमिक? "सफेद": "बैंगनी")};
`;
निर्यात करनाचूकसमारोहघर() {
 वापसी <बटन प्राथमिक>मुख्य</Button>
}

स्टाइल घटकों के साथ, आपको सीएसएस को प्रॉप्स को मैन्युअल रूप से पास करने की आवश्यकता नहीं है। यह स्वचालित रूप से उपलब्ध है, लेखन शैली को सरल करता है जो घटक के डेटा पर निर्भर करता है।

स्टाइल वाले घटकों का उपयोग करने के फायदे

स्टाइल-घटक पुस्तकालय का उपयोग करने के कुछ फायदे यहां दिए गए हैं।

यह सीएसएस विशिष्टता समस्याओं को हल करता है

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

आपको घटकों के अंदर सीएसएस लिखने की अनुमति देता है

जैसा कि बटन घटक उदाहरण से देखा गया है, स्टाइल-घटक आपको एक ही फ़ाइल में CSS और JS को संयोजित करने की अनुमति देता है। इसलिए, आपको एक अलग CSS फ़ाइल बनाने या फ़ाइल से फ़ाइल में स्विच करते रहने की आवश्यकता नहीं है।

UI किट बनाते समय यह एक बहुत बड़ा लाभ है क्योंकि आप घटकों की सभी कार्यक्षमता को एक फ़ाइल में संग्रहीत करते हैं।

इसके अलावा, घटकों के अंदर सीएसएस लिखना। यह स्टाइल के साथ प्रॉप्स और स्टेट्स को साझा करना आसान बनाता है।

प्रकार की जाँच की अनुमति देता है

स्टाइल घटकों के साथ, आप अपनी शैलियों में उपयोग किए गए प्रोप और मूल्यों को टाइप-चेक कर सकते हैं। उदाहरण के लिए, आप टाइपस्क्रिप्ट का उपयोग करके ऊपर दिए गए बटन घटक को फिर से लिख सकते हैं।

इंटरफेसरंगमंच की सामग्री{
 मुख्य: बूलियन
}
कास्ट बटन = स्टाइल.बटन<रंगमंच की सामग्री>`
गद्दी: 0.8rem 1.6rem;
 पृष्ठभूमि-रंग: ${(प्रॉप्स) => (प्रॉप्स.प्राथमिक? "बैंगनी": "सफेद")};
 सीमा: 1पीएक्स ठोस #00000;
 रंग: ${(प्रॉप्स) => (प्रॉप्स.प्राथमिक? "सफेद": "बैंगनी")};
`;

घटक में टाइपस्क्रिप्ट का उपयोग करना इसका मतलब है कि आप कोड के रूप में टाइप त्रुटियों की जांच कर रहे हैं और डिबगिंग समय कम कर रहे हैं।

बॉक्स से बाहर थीमिंग का समर्थन करता है

एक डार्क थीम जोड़ना या आपके आवेदन के लिए कोई अन्य विषय कठिन और समय लेने वाला हो सकता है। हालाँकि, स्टाइल वाले घटक प्रक्रिया को सरल बनाते हैं। आप निर्यात करके अपने ऐप में थीम जोड़ सकते हैं a आवरण घटक।

स्थिरांक बटन = स्टाइल। मुख्य`
 पृष्ठभूमि-रंग: ${props => प्रॉप्स.थीम.लाइट.बैकग्राउंड};
 रंग: ${प्रॉप्स => प्रॉप्स.थीम.लाइट.फोंटकलर};
`
<थीमप्रोवाइडर थीम = {थीम}>
<बटन>
 लाइट बटन
</Button>
</ThemeProvider>

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

स्टाइल घटकों का उपयोग करने के विपक्ष

स्टाइल-कंपोनेंट्स लाइब्रेरी का उपयोग करने के कई फायदे हैं, लेकिन इसके नुकसान भी हैं।

यह ढांचा स्वतंत्र नहीं है

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

यह समय लेने वाला और महंगा है। का उपयोग करते हुए सीएसएस मॉड्यूल या भावना की तरह एक ढांचा स्वतंत्र पुस्तकालय अधिक भविष्य-सबूत है।

इसे पढ़ना मुश्किल हो सकता है

स्टाइल और रिएक्ट घटकों के बीच अंतर करना मुश्किल हो सकता है, खासकर परमाणु डिजाइन प्रणाली के बाहर। इस उदाहरण पर विचार करें:

<मुख्य>
<एनएवी>
<सामग्री सूचीबद्ध करें>
<लिंक पाठ>एक पेटी को अपनाएं</LinkText>
</ListItem>
<सामग्री सूचीबद्ध करें>
<लिंक पाठ>दान देना</LinkText>
</ListItem>
</Nav>
<हैडर>गोद लेना, दान करना'टी दुकान!</Header>
<सेकेंडरीबीटीएन बीटीएनटेक्स्ट="दान देना" />
</Main>

यह जानने का एकमात्र तरीका है कि किस घटक में व्यावसायिक तर्क है, यह जाँच कर कि क्या उसके पास सहारा है। इसके अलावा, भले ही इस उदाहरण में घटक नाम वर्णनात्मक हैं, फिर भी उनकी कल्पना करना मुश्किल है।

उदाहरण के लिए, हैडर घटक एक शीर्षक हो सकता है, लेकिन जब तक आप शैलियों की जांच नहीं करते हैं, तब तक आप कभी नहीं जान सकते कि यह h1, h2, या h3 है या नहीं।

कुछ डेवलपर केवल स्टाइल वाले घटक को रैपर के रूप में उपयोग करके और इसके अंदर के तत्वों के लिए सिमेंटिक HTML टैग का उपयोग करके इस समस्या का समाधान करते हैं।

इस उदाहरण में, शीर्ष लेख घटक h1 टैग का उपयोग कर सकता है।

<एच 1>गोद लेना, दान करना'टी दुकान!</h1>

आप इसे किसी अन्य फ़ाइल (जैसे styled.js) में स्टाइल किए गए घटकों को परिभाषित करके आगे ले जा सकते हैं, जिसे आप बाद में एक रिएक्ट घटक में आयात कर सकते हैं।

आयात * जैसा स्टाइल से './स्टाइल'
// Styled.components का उपयोग करें
<शैलीबद्ध। मुख्य>
// कोड
</styled.Main>

ऐसा करने से आपको एक स्पष्ट दृश्य मिलता है कि कौन से घटक स्टाइल किए गए हैं और कौन से रिएक्ट घटक हैं।

स्टाइल घटकों को रनटाइम पर संकलित किया जाता है

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

स्टेटिक सीएसएस बहुत तेज है। इससे पहले कि ब्राउजर इसे स्टाइल पेजों पर उपयोग करे, इसे संसाधित करने की आवश्यकता नहीं है। हालांकि, हर रिलीज के साथ स्टाइल-कंपोनेंट्स लाइब्रेरी में सुधार हो रहा है। यदि आप कुछ कम प्रदर्शन कर सकते हैं, तो आगे बढ़ें और इसका इस्तेमाल करें।

स्टाइल वाले घटकों का उपयोग कब करें

कुछ डेवलपर्स जेएस फाइलों में सीएसएस लिखने का आनंद लेते हैं, जबकि अन्य अलग सीएसएस फाइलों को पसंद करते हैं। आप CSS लिखने का चुनाव कैसे करते हैं, यह अंततः प्रोजेक्ट पर ही निर्भर करता है और आपको या आपकी टीम को क्या पसंद है। UI लाइब्रेरी बनाने के लिए स्टाइल वाले घटक एक अच्छा विकल्प हैं क्योंकि सब कुछ एक फ़ाइल में हो सकता है और आसानी से निर्यात और पुन: उपयोग किया जा सकता है।

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