React-এ স্টাইলিং করার সময় গ্লোবাল CSS ব্যবহার

ধরুন আমাদের কাছে একটি React কম্পোনেন্ট রয়েছে App, যার মধ্যে একটি div আছে, এবং 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>

একটি React কম্পোনেন্ট তৈরি করুন, যাতে একটি div থাকবে, এবং div-এর মধ্যে দুটি বাটন থাকবে। আপনার ট্যাগগুলির জন্য CSS স্টাইল সহ একটি styles.css ফাইল তৈরি করুন। কম্পোনেন্টের ট্যাগগুলিতে লেখা স্টাইলগুলি প্রয়োগ করুন।