CSS modules React के साथ स्टाइलिंग का अध्ययन जारी रखना

हमारे ऐप्लिकेशन buttons पर काम जारी रखते हैं। अब हम मुख्य कंपोनेंट App पर ध्यान देंगे, जो पहले से ही src फोल्डर में जेनरेट किया गया था। इसमें हमारे पास दो div, एक हेडिंग और एक बटन होगा।

App.css फाइल का नाम बदलकर App.module.css कर दें, समझौते के अनुसार, इसे साफ करें और इसमें कुछ CSS स्टाइल्स वाली क्लासेज़ बनाएं:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

और अब App.js फाइल की सामग्री साफ करें। फिर React कंपोनेंट Buttons और स्टाइल्स को App.module.css से इम्पोर्ट करें। अपने टैग लिखें और उन पर स्टाइल्स लागू करें, और साथ ही React कंपोनेंट Buttons को प्लेस करें:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

हमने App.module.css से इम्पोर्ट की गई स्टाइल्स वाले ऑब्जेक्ट के नाम के लिए classes शब्द का इस्तेमाल किया। पिछले मामले की तरह, आप इस ऑब्जेक्ट को अपनी सुविधा के अनुसार नाम दे सकते हैं।

कुछ छोटे कदम बाकी हैं। index.css फाइल का नाम समझौते के अनुसार index.module.css में बदल दें और index.js फाइल में इम्पोर्ट लाइन बदलना न भूलें:

import "./index.css";

इस लाइन पर:

import "./index.module.css";

अब हम ब्राउज़र में अपने ऐप्लिकेशन के काम का परिणाम देख सकते हैं।

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

एक और महत्वपूर्ण बात यह है कि CSS modules सामान्य एक्सटर्नल CSS फाइलों को इम्पोर्ट करने से मनाही नहीं करता है।

पाठ के सिद्धांत के अनुसार, अपने ऐप्लिकेशन inputs के React कंपोनेंट App को साफ करें, जिसे आपने पिछले पाठ के कार्यों में बनाया था, और साथ ही इसमें आपके द्वारा बनाए गए Inputs को किसी स्टाइलिश div में प्लेस करें। App में एक स्टाइलिश हेडिंग जोड़ें। यह सब किसी अन्य div में रखें। React कंपोनेंट App के टैग्स के लिए स्टाइल्स App.modules.css में लिखें।

सभी चीजों को एक साथ असेंबल करें, बाकी की फाइलों को सही तरीके से कनेक्ट करें और अपना ऐप्लिकेशन inputs लॉन्च करें।