स्टाइल वाले घटक क्या हैं?

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

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

1. डायनेमिक स्टाइलिंग: स्टाइल कंपोनेंट्स आपको प्रॉप्स, स्टेट या किसी अन्य वेरिएबल के आधार पर शैलियों को गतिशील रूप से सेट करने के लिए जावास्क्रिप्ट का उपयोग करने की अनुमति देते हैं।

2. बेहतर संगठन: शैलियों को उनके द्वारा प्रभावित घटकों के करीब रखने से आपका कोड अधिक मॉड्यूलर और प्रबंधित करना आसान हो जाता है।

3. कोई वर्ग नाम बग नहीं: चूंकि शैलियों का दायरा घटकों तक होता है, इसलिए आपको वर्ग नाम टकराव या पारंपरिक सीएसएस के साथ आम विशिष्ट मुद्दों के बारे में चिंता करने की ज़रूरत नहीं होगी।

4. थीमिंग समर्थन: स्टाइल कंपोनेंट्स थीमिंग के लिए अंतर्निहित समर्थन प्रदान करता है, जिससे आपके एप्लिकेशन में लगातार शैलियों को लागू करना आसान हो जाता है।

स्टाइल वाले घटकों को स्थापित करना

स्टाइल्ड कंपोनेंट्स का उपयोग शुरू करने के लिए, आपको इसे एनपीएम या यार्न के माध्यम से इंस्टॉल करना होगा:

npm install styled-components

or

yarn add styled-components

बुनियादी उपयोग

स्टाइल्ड कंपोनेंट्स कैसे काम करते हैं यह बताने के लिए यहां एक बुनियादी उदाहरण दिया गया है:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

प्रॉप्स के आधार पर अनुकूलन

स्टाइल किए गए घटक कार्यात्मक हैं, इसलिए हम आसानी से तत्वों को गतिशील रूप से स्टाइल कर सकते हैं।

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

थीम

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

सबसे पहले, आप अपनी थीम परिभाषित करें:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

फिर, अपने एप्लिकेशन को थीमप्रोवाइडर के साथ लपेटें और अपनी थीम पास करें:

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

अंत में, अपने स्टाइल किए गए घटकों में थीम गुणों तक पहुंचें:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

निष्कर्ष

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