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

आइए देखें कि अपने रिएक्ट एप्लिकेशन में स्टाइल वाले घटकों को कैसे सेट अप और एकीकृत किया जाए।

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

आप अपने टर्मिनल में इस आदेश को चलाकर स्टाइल-घटकों को स्थापित कर सकते हैं:

npm i स्टाइल-components

यार्न का उपयोग करके स्टाइल-घटकों को स्थापित करने के लिए, चलाएँ:

यार्न स्टाइल-घटक जोड़ें

एक स्टाइल वाला घटक बनाना

एक स्टाइल वाला घटक शैलियों के साथ एक मानक रिएक्ट घटक की तरह है। विभिन्न हैं स्टाइल घटकों के पेशेवरों और विपक्ष, जिनके सही उपयोग के लिए विचार करना महत्वपूर्ण है।

सामान्य सिंटैक्स इस तरह दिखता है:

आयात स्टाइल से"स्टाइल-घटक";

कॉन्स्ट कंपोनेंटनाम = स्टाइल। डोमेलिमेंटटैग`
 सीएसएसप्रॉपर्टी: cssValue
`

यहाँ आप आयात करते हैं स्टाइल से स्टाइल-घटक पुस्तकालय। स्टाइल फ़ंक्शन एक आंतरिक विधि है जो जावास्क्रिप्ट कोड को वास्तविक सीएसएस में परिवर्तित करती है। घटक का नाम स्टाइल किए गए घटक का नाम है। डोमेलिमेंटटैग वह HTML/JSX तत्व है जिसे आप स्टाइल करना चाहते हैं, जैसे कि div, span, बटन, आदि।

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

जैसे इतना:

आयात प्रतिक्रिया से"प्रतिक्रिया";
समारोहबटन() {
वापस करना (
आपका स्वागत है!!!</button>
 )
}

अब आप स्टाइल-घटकों का उपयोग करके बटन के लिए शैली बना सकते हैं:

आयात स्टाइल से"स्टाइल-घटक";
कॉन्स्ट StyledButton = Styled.button`
 गद्दी: 1रेम 0.8रेम;
 सीमा-त्रिज्या: 15पीएक्स;
 पृष्ठभूमि-रंग: ग्रे;
 रंग: #FFFFFF;
 फ़ॉन्ट आकार: 15पीएक्स;
`

सब कुछ एक साथ रखकर, आपको बदलने की आवश्यकता होगी बटन के साथ टैग करें स्टाइलबटन अवयव:

आयात स्टाइल से"स्टाइल-घटक";
आयात प्रतिक्रिया से"प्रतिक्रिया";
कॉन्स्ट StyledButton = Styled.button`
 गद्दी: 1रेम 0.8रेम;
 सीमा-त्रिज्या: 15पीएक्स;
 पृष्ठभूमि-रंग: ग्रे;
 रंग: #FFFFFF;
 फ़ॉन्ट आकार: 15पीएक्स;
`
समारोहबटन() {
वापस करना (
आपका स्वागत है!!!</StyledButton>
 )
}

घोंसला बनाने की शैलियाँ

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

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
समारोहअनुप्रयोग() {
वापस करना (


स्टाइल वाले घटक</h1>


स्टाइल-घटकों में आपका स्वागत है</p>
 </div>
 )
}

यह कोड एक घटक बनाता है जिसमें एक होता है एच 1 तत्व और ए पी तत्व।

आप स्टाइल किए गए घटकों की नेस्टेड स्टाइलिंग सुविधा का उपयोग करके इन तत्वों को स्टाइल कर सकते हैं:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात स्टाइल से'शैली-घटक';
कॉन्स्ट StyledApp = Styled.div`
 रंग: #333333;
 पाठ-संरेखण: केंद्र;
 एच1 {
 फ़ॉन्ट आकार: 32पीएक्स;
 फ़ॉन्ट-शैली: इटैलिक;
 फोंट की मोटाई: बोल्ड;
 पत्र अंतराल: 1.2रेम;
 टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस; 
 }
 पी {
 मार्जिन-ब्लॉक-स्टार्ट: 1रेम;
 फ़ॉन्ट आकार: 18पीएक्स;
 }
`
समारोहअनुप्रयोग() {
वापस करना (

स्टाइल वाले घटक</h1>


स्टाइल-घटकों में आपका स्वागत है</p>
 </StyledApp>
 )
}

यह कोड एक स्टाइल वाले घटक का उपयोग करता है और इसके लिए स्टाइल को नेस्ट करता है एच 1 और पी टैग।

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

स्टाइल-कंपोनेंट्स लाइब्रेरी की एक उल्लेखनीय विशेषता चर बनाने की क्षमता है। यह क्षमता गतिशील शैली प्रदान करती है जहाँ आप शैलियों को निर्धारित करने के लिए जावास्क्रिप्ट चर का उपयोग कर सकते हैं।

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

आयात स्टाइल से"स्टाइल-घटक";
कॉन्स्ट मुख्य रंग = "लाल";
कॉन्स्ट शीर्षक = स्टाइल.एच1`
 रंग: ${MainColor};
`;
समारोहअनुप्रयोग() {
वापस करना (
 <>
हैलो वर्ल्ड!</Heading>
 </>
 );
}

उपरोक्त कोड ब्लॉक में, पाठ "हैलो वर्ल्ड!” लाल रंग में प्रदर्शित होगा।

ध्यान दें कि यह उदाहरण स्टाइल किए गए घटक के संयोजन के साथ टेम्पलेट शाब्दिक में मानक जावास्क्रिप्ट चर का उपयोग करता है। से भिन्न दृष्टिकोण है सीएसएस चर का उपयोग करना.

विस्तार शैलियों

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

शैलियों का विस्तार करने के लिए, आप स्टाइल वाले घटक को इसमें लपेटते हैं स्टाइल () कंस्ट्रक्टर और फिर कोई अतिरिक्त स्टाइल शामिल करें।

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

आयात स्टाइल से"स्टाइल-घटक";
आयात प्रतिक्रिया से"प्रतिक्रिया";
कॉन्स्ट बटन = स्टाइल.बटन`
 गद्दी: 1रेम 0.8रेम;
 सीमा-त्रिज्या: 15पीएक्स;
 पृष्ठभूमि-रंग: ग्रे;
 रंग: #FFFFFF;
 फ़ॉन्ट आकार: 15पीएक्स;
`
कॉन्स्ट प्राइमरीबटन = स्टाइल (बटन)`
 पृष्ठभूमि-रंग: नीला;
`
समारोहअनुप्रयोग() {
वापस करना (
स्वागत</Button>
नमस्ते!</PrimaryButton>
 )
}

आप का उपयोग करके स्टाइल किए गए घटक द्वारा प्रस्तुत किए गए टैग को भी बदल सकते हैं जैसा एक सहारा।

जैसा प्रोप आपको अंतर्निहित एचटीएमएल/जेएसएक्स तत्व निर्दिष्ट करने की अनुमति देता है जिसे स्टाइल घटक के रूप में प्रस्तुत किया जाएगा।

उदाहरण के लिए:

आयात स्टाइल से"स्टाइल-घटक";
आयात प्रतिक्रिया से"प्रतिक्रिया";
कॉन्स्ट बटन = स्टाइल.बटन`
 गद्दी: 1रेम 0.8रेम;
 सीमा-त्रिज्या: 15पीएक्स;
 पृष्ठभूमि-रंग: ग्रे;
 रंग: #FFFFFF;
 फ़ॉन्ट आकार: 15पीएक्स;
`
समारोहअनुप्रयोग() {
वापस करना (
जैसा='ए' href='#'>स्वागत है</Button>
 )
}

यह कोड प्रस्तुत करता है बटन घटक के रूप में ए तत्व, इसकी स्थापना href विशेषता '#'।

वैश्विक शैलियाँ बनाना

स्टाइल किए गए घटक आमतौर पर एक घटक के दायरे में होते हैं, इसलिए आप सोच रहे होंगे कि एप्लिकेशन को समग्र रूप से कैसे शैलीबद्ध किया जाए। आप वैश्विक स्टाइल के उपयोग के साथ एप्लिकेशन को स्टाइल कर सकते हैं।

स्टाइल-कंपोनेंट्स ऑफ़र करता है a createGlobalStyle फ़ंक्शन जो आपको विश्व स्तर पर शैलियों की घोषणा करने में सक्षम बनाता है। createGlobalStyle घटक-दायरे वाली स्टाइलिंग की बाधा को हटा देता है और आपको प्रत्येक घटक पर लागू होने वाली शैलियों की घोषणा करने की अनुमति देता है।

वैश्विक शैली बनाने के लिए, आप आयात करते हैं createGlobalStyle कार्य करें और उन शैलियों की घोषणा करें जिनकी आपको आवश्यकता है।

उदाहरण के लिए:

आयात {क्रिएटग्लोबल स्टाइल} से'शैली-घटक';
कॉन्स्ट ग्लोबल स्टाइल्स = क्रिएटग्लोबल स्टाइल`
 @आयात यूआरएल(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 अंतर: 0;
 गद्दी: 0;
 बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
 }
 शरीर {
 पृष्ठभूमि का रंग: #343434;
 फ़ॉन्ट आकार: 15पीएक्स;
 रंग: #FFFFFF;
 फुहारा परिवार: 'मोंटसेराट', सान्स सेरिफ़; 
 }
`
निर्यातगलती करना ग्लोबल स्टाइल्स;

फिर आप आयात करते हैं ग्लोबल स्टाइल्स अपने ऐप घटक में घटक और इसे प्रस्तुत करें। प्रतिपादन कर रहा है ग्लोबल स्टाइल्स आपके ऐप घटक में घटक आपके एप्लिकेशन में शैलियों को लागू करेगा।

जैसे इतना:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात ग्लोबल स्टाइल्स से'।/वैश्विक';
समारोहअनुप्रयोग() {
वापस करना (



 </div>
 )
}

स्टाइल किए गए घटकों के लिए और अधिक

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

स्टाइल वाले घटकों के लिए और भी बहुत कुछ है, जैसे कि एनिमेशन, और रिएक्ट एक बड़ा ढांचा है जिसके अलावा बहुत कुछ सीखना है।