टांके के साथ एक रिएक्ट एप्लिकेशन को स्टाइल करना

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

टांके लगाना

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

अपने रिएक्ट एप्लिकेशन को स्टाइल करने से पहले, आपको टांके लाइब्रेरी को इंस्टॉल और सेट करना होगा। एनपीएम का उपयोग करके लाइब्रेरी स्थापित करने के लिए, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm install @stitches/react

वैकल्पिक रूप से, आप इस कमांड के साथ यार्न का उपयोग करके लाइब्रेरी स्थापित कर सकते हैं:

yarn add @stitches/react

एक बार जब आप टाँके लाइब्रेरी स्थापित कर लेते हैं, तो आप अपने रिएक्ट एप्लिकेशन को स्टाइल करना शुरू कर सकते हैं।

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

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

स्टाइल फ़ंक्शन दो तर्क लेता है। पहला एक HTML/JSX तत्व है, और दूसरा एक ऑब्जेक्ट है जिसमें इसे स्टाइल करने के लिए CSS गुण शामिल हैं।

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

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
});

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

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

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

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault App;

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

स्टाइल फ़ंक्शन आपको समान सिंटैक्स के साथ सीएसएस शैलियों को नेस्ट करने की सुविधा भी देता है SASS/SCSS एक्सटेंशन भाषा. इससे आपके लिए अपनी शैलियों को व्यवस्थित करना और अपने कोड को अधिक पठनीय बनाना आसान हो जाता है।

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

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});

यह कोड लक्ष्य करने के लिए नेस्टेड सीएसएस शैलियों और एक छद्म वर्ग का उपयोग करता है बटन अवयव। जब आप बटन पर होवर करते हैं, तो नेस्टेड चयनकर्ता &:होवर बटन की पृष्ठभूमि और टेक्स्ट रंग बदलता है।

सीएसएस फ़ंक्शन के साथ स्टाइलिंग

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

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

import React from"react";
import { css } from"@stitches/react";
const buttonStyle = css({
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});
functionApp() {
return (
 <>
Click Me</button>
 </>
 );
}
exportdefault App;

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

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

का उपयोग टांके लाइब्रेरी, आप इसका उपयोग करके अपने एप्लिकेशन के लिए वैश्विक शैलियों को भी परिभाषित कर सकते हैं ग्लोबलसीएसएस समारोह। ग्लोबलसीएसएस फ़ंक्शन आपके रिएक्ट एप्लिकेशन पर वैश्विक शैलियाँ बनाता और लागू करता है।

अपनी वैश्विक शैलियों का उपयोग करके परिभाषित करने के बाद ग्लोबलसीएसएस, फ़ंक्शन को अपने में कॉल करें अनुप्रयोग आपके एप्लिकेशन में शैलियों को लागू करने के लिए घटक।

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

import React from"react";
import { globalCss } from"@stitches/react";
const globalStyles = globalCss({
 body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
functionApp() {
 globalStyles();
return<>;
}
exportdefault App;

यह उदाहरण शैलियों को परिभाषित करता है शरीर तत्व का उपयोग कर रहा है ग्लोबलसीएसएस समारोह। कॉल पृष्ठभूमि का रंग सेट करती है #f2f2f2 और पाठ का रंग #333333.

गतिशील शैलियाँ बनाना

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

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

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 fontFamily: "cursive",
 border: "none",
 variants: {
 color: {
 black: {
 backgroundColor: "#333333",
 color: "#e2e2e2",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
 },
 gray: {
 backgroundColor: "#e2e2e2",
 color: "#333333",
"&:hover": {
 backgroundColor: "#333333",
 color: "#e2e2e2",
 },
 },
 },
 },
});

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

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

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
"gray">Click Me</Button>
"black">Click Me</Button>
 </>
 );
}
exportdefault App;

एक बार जब आप इस एप्लिकेशन को प्रस्तुत कर देंगे, तो आपके इंटरफ़ेस पर दो बटन प्रदर्शित होंगे। बटन नीचे दी गई छवि की तरह दिखेंगे।

थीम टोकन बनाना

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

इन थीम टोकन को बनाने के लिए, का उपयोग करें टाँके बनाएँ समारोह। टाँके बनाएँ टांके लाइब्रेरी से फ़ंक्शन आपको लाइब्रेरी को कॉन्फ़िगर करने की अनुमति देता है। का उपयोग सुनिश्चित करें टाँके बनाएँ ए में कार्य करें टांके.config.ts फ़ाइल या ए टांके.config.js फ़ाइल।

थीम टोकन कैसे बनाएं इसका एक उदाहरण यहां दिया गया है:

import { createStitches } from"@stitches/react";
exportconst { styled, css } = createStitches({
 theme: {
 colors: {
 gray: "#e2e2e2",
 black: "#333333",
 },
 space: {
1: "5px",
2: "10px",
3: "15px",
 },
 fontSizes: {
1: "12px",
2: "13px",
3: "15px",
 },
 },
});

अब जब आपने अपने थीम टोकन परिभाषित कर लिए हैं, तो आप उन्हें अपनी घटक शैलियों में उपयोग कर सकते हैं।

import { styled } from"../stitches.config.js";
exportconst Button = styled("button", {
 padding: "$1 $3",
 borderRadius: "12px",
 fontSize: "$1",
 border: "none",
 color: '$black',
 backgroundColor: '$gray',
});

उपरोक्त कोड ब्लॉक रंग टोकन का उपयोग करता है $ग्रे और $काला बटन की पृष्ठभूमि और टेक्स्ट रंग के लिए। यह स्पेस टोकन का भी उपयोग करता है $1 और $3 बटन की पैडिंग और फ़ॉन्ट आकार चर सेट करने के लिए $1 बटन का फ़ॉन्ट आकार सेट करने के लिए.

टांके के साथ कुशल स्टाइलिंग

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

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