React में Styled Components के साथ स्टाइलिंग

पिछले पाठों में हमने ग्लोबल CSS और इनलाइन स्टाइलिंग का उपयोग करके स्टाइलिंग के तरीकों पर विचार किया। इस पाठ में हम बड़े एप्लिकेशन्स के लिए अधिक प्रभावी दृष्टिकोण - styled-components लाइब्रेरी के उपयोग के साथ काम करेंगे।

तो, हमारा बिना CSS स्टाइल्स वाला कंपोनेंट लेते हैं, जिसका हमने पिछले पाठों में उपयोग किया था:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

शुरुआत के लिए हम Styled Components लाइब्रेरी इंस्टॉल करते हैं:

terminalnpm install --save styled-components

फिर हम आवश्यक पैकेज को App कंपोनेंट में इम्पोर्ट करते हैं:

App.jsimport styled from 'styled-components';

अब हम टैग्स को स्टाइल्स में रैप कर सकते हैं और उन्हें React कंपोनेंट्स के रूप में उपयोग कर सकते हैं, लेकिन अब JS में सीधे संलग्न स्टाइल्स के साथ। इस दृष्टिकोण को CSS in JS भी कहा जाता है।

आइए पहले पैराग्राफ को स्टाइल करें। इसके लिए App फंक्शन से पहले इम्पोर्ट स्ट्रिंग्स के बाद हम Text1 कंपोनेंट बनाएंगे। लाइब्रेरी से styled ऑब्जेक्ट में हमें पैराग्राफ चाहिए, इसलिए हम styled.p लिखते हैं। फिर, टेम्पलेट स्ट्रिंग में आवश्यक CSS स्टाइल्स लिखते हैं - जैसे सामान्य CSS में:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

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

अब App कंपोनेंट के फंक्शन के अंदर p टैग को हमारे द्वारा बनाए गए कंपोनेंट Text1 से CSS स्टाइल्स के साथ बदलें:

App.js<Text1>text</Text1>     

इसी तरह से हम दूसरे और तीसरे पैराग्राफ को स्टाइल करते हैं। इसके लिए हम Text2 और Text3 कंपोनेंट्स बनाते हैं:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

और, अंत में, हम अपने div को स्टाइल करते हैं। इसके लिए हम एक कंपोनेंट बनाते हैं और उसे Container नाम देते हैं:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

हम अपने सभी टैग्स को बनाए गए कंपोनेंट्स से बदल देते हैं:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

इस दृष्टिकोण के कारण स्टाइल्स के साथ पुन: प्रयोज्य कंपोनेंट्स बनाए जा सकते हैं।

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

इसी तरह से कंपोनेंट्स को स्टाइल किया जा सकता है, उदाहरण के लिए, Emotion लाइब्रेरी का उपयोग करके।