हम सभी मानक तरीके से परिचित हैं एक स्टाइलशीट को जोड़ना को <head> एक HTML दस्तावेज़ का, है ना? यह उन कई तरीकों में से एक है जिससे हम CSS लिख सकते हैं। लेकिन रिएक्ट प्रोजेक्ट में सिंगल-पेज एप्लिकेशन (एसपीए) में चीजों को स्टाइल करना कैसा दिखता है?
पता चलता है कि रिएक्ट एप्लिकेशन को स्टाइल करने के कई तरीके हैं। कुछ पारंपरिक स्टाइल के साथ ओवरलैप करते हैं, अन्य इतना नहीं। लेकिन आइए उन सभी तरीकों को गिनें जो हम इसे कर सकते हैं।
बाहरी स्टाइलशीट आयात करना
जैसा कि नाम से पता चलता है, रिएक्ट सीएसएस फाइलों को आयात कर सकता है। प्रक्रिया उसी तरह है जैसे हम HTML में CSS फ़ाइल को कैसे लिंक करते हैं <head>:
- अपनी प्रोजेक्ट निर्देशिका में एक नई CSS फ़ाइल बनाएँ।
- सीएसएस लिखें।
- इसे रिएक्ट फ़ाइल में आयात करें।
इस कदर:
import "./style.css";यह आमतौर पर उस फ़ाइल के शीर्ष पर जाता है जहाँ अन्य आयात होते हैं:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;इस उदाहरण में, एक सीएसएस फ़ाइल को एक में आयात किया जाता है App.js से /Components/css फ़ोल्डर.
इनलाइन शैलियाँ लिखें
आप यह सुनने के आदी हो सकते हैं कि इनलाइन स्टाइल रखरखाव और क्या नहीं के लिए बहुत अच्छा नहीं है, लेकिन निश्चित रूप से स्थितियां हैं (यहां एक है!) जहां यह समझ में आता है। और प्रतिक्रिया में रखरखाव एक समस्या से कम नहीं है, क्योंकि सीएसएस अक्सर पहले से ही उसी फ़ाइल के अंदर बैठता है।
यह प्रतिक्रिया में इनलाइन स्टाइल का एक सुपर सरल उदाहरण है:
<div className="main" style={{color:"red"}}>हालांकि, वस्तुओं का उपयोग करने का एक बेहतर तरीका है:
- सबसे पहले, एक ऐसी वस्तु बनाएं जिसमें विभिन्न तत्वों के लिए शैलियाँ हों।
- फिर इसे का उपयोग करके एक तत्व में जोड़ें
styleविशेषता और फिर शैली के लिए संपत्ति का चयन करें।
आइए इसे संदर्भ में देखें:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;इस उदाहरण में शामिल है a styles दो और वस्तुओं से युक्त वस्तु, एक के लिए .main क्लास और दूसरा टेक्स्ट इनपुट के लिए, जिसमें स्टाइल नियम होते हैं जो हम बाहरी स्टाइलशीट में देखने की अपेक्षा करते हैं। उन वस्तुओं को तब लागू किया जाता है style उन तत्वों की विशेषता जो लौटाए गए मार्कअप में हैं।
ध्यान दें कि कर्ली कोष्ठक का उपयोग शैलियों को संदर्भित करते समय किया जाता है, बजाय उद्धरण चिह्नों के जो हम सामान्य रूप से सादे HTML में उपयोग करते हैं।
सीएसएस मॉड्यूल का प्रयोग करें
सीएसएस मॉड्यूल... उन लोगों के साथ क्या हुआ, है ना? उनके पास स्थानीय रूप से स्कोप किए गए चर का लाभ है और इसका उपयोग रिएक्ट के साथ ही किया जा सकता है। लेकिन वे क्या हैं, फिर से, बिल्कुल?
का हवाला देते हुए रेपो के दस्तावेज:
सीएसएस मॉड्यूल अलग-अलग सीएसएस फाइलों को सीएसएस और डेटा दोनों में संकलित करके काम करता है। CSS आउटपुट सामान्य, वैश्विक CSS है, जिसे सीधे ब्राउज़र में इंजेक्ट किया जा सकता है या एक साथ संयोजित किया जा सकता है और उत्पादन उपयोग के लिए एक फ़ाइल में लिखा जा सकता है। डेटा का उपयोग उन मानव-पठनीय नामों को मैप करने के लिए किया जाता है जिनका उपयोग आपने फ़ाइलों में वैश्विक रूप से सुरक्षित आउटपुट CSS में किया है।
सरल शब्दों में, CSS मॉड्यूल हमें बिना किसी संघर्ष के कई फाइलों में एक ही वर्ग के नाम का उपयोग करने की अनुमति देता है क्योंकि प्रत्येक वर्ग के नाम को एक अद्वितीय प्रोग्रामेटिक नाम दिया जाता है। यह बड़े अनुप्रयोगों में विशेष रूप से उपयोगी है। प्रत्येक वर्ग का नाम स्थानीय रूप से उस विशिष्ट घटक के लिए होता है जिसमें इसे आयात किया जा रहा है।
एक सीएसएस मॉड्यूल स्टाइलशीट एक नियमित स्टाइलशीट के समान है, केवल एक अलग एक्सटेंशन के साथ (जैसे styles.module.css) यहां बताया गया है कि उन्हें कैसे सेट किया जाता है:
- के साथ एक फाइल बनाएं
.module.cssविस्तार के रूप में। - उस मॉड्यूल को रिएक्ट ऐप में आयात करें (जैसा कि हमने पहले देखा था)
- एक जोड़ें
classNameकिसी तत्व या घटक के लिए और आयातित शैलियों से विशेष शैली का संदर्भ लें।
सुपर सरल उदाहरण:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;स्टाइल-घटकों का प्रयोग करें
क्या आपने उपयोग किया है? स्टाइल-घटकों? यह काफी लोकप्रिय है और आपको अपने जावास्क्रिप्ट में वास्तविक सीएसएस का उपयोग करके कस्टम घटक बनाने की अनुमति देता है। एक स्टाइल-घटक मूल रूप से एक प्रतिक्रिया घटक है - इसके लिए तैयार हो जाओ - शैलियों। कुछ विशेषताओं में अद्वितीय वर्ग नाम, गतिशील स्टाइल और CSS का बेहतर प्रबंधन शामिल है क्योंकि प्रत्येक घटक की अपनी अलग शैलियाँ होती हैं।
कमांड लाइन में स्टाइल-घटक npm पैकेज स्थापित करें:
npm install styled-componentsअगला, इसे रिएक्ट ऐप में आयात करें:
import styled from 'styled-components'एक कंपोनेंट बनाएं और उसे एक स्टाइल प्रॉपर्टी असाइन करें। में बैकटिक्स द्वारा निरूपित टेम्प्लेट शाब्दिक के उपयोग पर ध्यान दें Wrapper वस्तु:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;ऊपर Wrapper घटक को एक div के रूप में प्रस्तुत किया जाएगा जिसमें वे शैलियाँ हों।
सशर्त स्टाइल
स्टाइल-घटकों के फायदों में से एक यह है कि घटक स्वयं कार्यात्मक होते हैं, जैसा कि आप सीएसएस के भीतर प्रोप का उपयोग कर सकते हैं। यह एक राज्य या प्रोप के आधार पर सशर्त बयानों और बदलती शैलियों के लिए द्वार खोलता है।
यहाँ एक डेमो है जो इसे दिखा रहा है:
यहाँ, हम div's . में हेरफेर कर रहे हैं display प्रदर्शन स्थिति पर संपत्ति। इस स्थिति को एक बटन द्वारा नियंत्रित किया जाता है जो क्लिक करने पर div की स्थिति को टॉगल करता है। यह बदले में, दो अलग-अलग राज्यों की शैलियों के बीच टॉगल करता है।
इनलाइन . में if कथन, हम उपयोग करते हैं a ? सामान्य के बजाय if/else वाक्य - विन्यास। else भाग अर्धविराम के बाद है। और याद रखें कि इनिशियलाइज़ होने के बाद हमेशा कॉल करें या स्टेट का इस्तेमाल करें। उस अंतिम डेमो में, उदाहरण के लिए, राज्य को ऊपर होना चाहिए Wrapper घटक की शैलियाँ।
हैप्पी रिएक्ट स्टाइल!
यह एक लपेट है, दोस्तों! हमने रिएक्ट एप्लिकेशन में शैलियों को लिखने के कई अलग-अलग तरीकों पर ध्यान दिया। और ऐसा नहीं है कि कोई बाकी से बेहतर है; आपके द्वारा उपयोग किया जाने वाला दृष्टिकोण निश्चित रूप से स्थिति पर निर्भर करता है। उम्मीद है कि अब आप उनके बारे में अच्छी तरह से समझ गए होंगे और जानते होंगे कि आपके रिएक्ट स्टाइलिंग शस्त्रागार में आपके पास उपकरणों का एक समूह है।
