रिएक्ट में स्टाइलिंग के दौरान ग्लोबल CSS का उपयोग

मान लीजिए, हमारे पास एक रिएक्ट कंपोनेंट App है, जिसमें एक div है, और उसके अंदर तीन पैराग्राफ हैं:

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

आइए इस कंपोनेंट को स्टाइल करें। इसके लिए, हमारे कंपोनेंट वाले फ़ोल्डर src में हम अपने टैग्स के लिए स्टाइल्स वाली एक सामान्य CSS फ़ाइल styles.css बनाएंगे।

इस फ़ाइल में div के लिए क्लास class1 बनाएंगे जिसमें ये स्टाइल्स होंगी:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

अब पहले पैराग्राफ के लिए क्लास class2 बनाएंगे जिसमें ये स्टाइल्स होंगी:

.class2 {
	color: orangered;
	font-weight: bold;
}

दूसरे पैराग्राफ के लिए क्लास class3 बनाएंगे जिसमें ये स्टाइल्स होंगी:

.class3 {
	font-style: italic;
	color: brown;
}

और, अंत में आखिरी पैराग्राफ के लिए क्लास class4 बनाएंगे:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

CSS फ़ाइल के साथ हमारा काम पूरा हो गया है। अब बस हमें जो CSS स्टाइल्स हमने टैग्स के लिए लिखी हैं, उन्हें लागू करना है। आइए अपनी कंपोनेंट वाली फ़ाइल App.js पर वापस आते हैं।

पहली चीज़ जो हमें अवश्य करनी चाहिए - फ़ाइल की शुरुआत में अपनी स्टाइल फ़ाइल styles.css को इम्पोर्ट करने वाली लाइन जोड़नी है:

import './styles.css';

अब, कंपोनेंट में CSS क्लासेस को लागू करने के लिए, हम class एट्रिब्यूट का उपयोग करेंगे। पहले पैराग्राफ के लिए हमारे पास क्लास class2 थी, आइए इसे लागू करें:

<p class="class2">text</p>

इसी तरह बाकी टैग्स के लिए भी क्लासेस जोड़ेंगे। नतीजे में हमें यह कोड मिलेगा:

<div class="class1">
	<p class="class2">text</p>
	<p class="class3">text</p>
	<p class="class4">text</p>
</div>

एक रिएक्ट कंपोनेंट बनाएं, जिसमें एक div हो, और div में दो बटन हों। अपने टैग्स के लिए CSS स्टाइल्स वाली फ़ाइल styles.css बनाएं। कंपोनेंट के टैग्स पर लिखी गई स्टाइल्स को लागू करें।