CSS মডিউলে React-এ ক্লাসের জন্য composes কমান্ড

এই পাঠে আমরা CSS মডিউলে একটি ক্লাসের CSS স্টাইল অন্য ক্লাসে পুনরায় ব্যবহার করার একটি খুব দরকারী পদ্ধতি বিবেচনা করব।

আমাদের buttons অ্যাপ্লিকেশনে ফিরে যাই, যা আমরা আগের পাঠে তৈরি করেছিলাম। Buttons.module.css ফাইলটি দেখি:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

ধরুন, আমরা চাই যে সমস্ত বাটনের একই গোলাকার কোণ এবং ফন্টের আকার হোক। অবশ্যই, প্রতিটি ক্লাসে একই বৈশিষ্ট্য লেখা সম্ভব। কিন্তু CSS মডিউল থেকে composes কমান্ডের ধন্যবাদ, আমরা অন্ভাবে কাজ করব।

প্রথমে আরও একটি ক্লাস তৈরি করি, উদাহরণস্বরূপ common-btn, যেখানে আমরা এই অভিন্ন বৈশিষ্ট্যগুলি রাখব। এবং এই ক্লাসের বৈশিষ্ট্যগুলি অন্যদের মধ্যে প্রয়োগ করতে, আপনাকে তাদের মধ্যে সিনট্যাক্স ব্যবহার করতে হবে:

সিলেক্টর {
	composes: ক্লাসের নাম;
}

এখন আমাদের Buttons.module.css-এর কোড এইরকম দেখাবে:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

আপনার React অ্যাপ্লিকেশন inputs নিন, যা আপনি আগের পাঠের কাজগুলিতে তৈরি করেছিলেন। সমস্ত ইনপুটের জন্য অভিন্ন মান সহ কয়েকটি অভিন্ন CSS স্টাইল যোগ করুন। একটি অতিরিক্ত ক্লাস তৈরি করুন যেখানে এই স্টাইলগুলি লেখা হবে। composes ব্যবহার করে সেগুলি ইনপুটের জন্য অন্যান্য সমস্ত ক্লাসে ছড়িয়ে দিন।