CSS মডিউল সহ 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 ফাইলের কন্টেন্ট ক্লিয়ার করি। তারপর Buttons React কম্পোনেন্ট এবং App.module.css থেকে স্টাইলগুলি ইম্পোর্ট করি। আমাদের ট্যাগগুলি লিখি এবং সেগুলিতে স্টাইল প্রয়োগ করি, এবং Buttons React কম্পোনেন্টটি প্লেস করি:

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 মডিউল সাধারণ এক্সটার্নাল CSS ফাইল ইম্পোর্ট করতে নিষেধ করে না।

পাঠের তত্ত্ব অনুসরণ করে, আপনার inputs অ্যাপ্লিকেশনের App React কম্পোনেন্টটি ক্লিয়ার করুন, যা আপনি গত পাঠের টাস্কগুলিতে তৈরি করেছিলেন, এবং এটিতে আপনার তৈরি করা Inputs কম্পোনেন্টটি কোনো স্টাইলিশ div-এ প্লেস করুন। App-এ একটি স্টাইলিশ হেডিং যোগ করুন। এই সবগুলোকে আরও একটি div-এ রাখুন। App React কম্পোনেন্টের ট্যাগগুলির জন্য স্টাইল App.modules.css-এ লিখুন।

সবগুলো একসাথে সংগ্রহ করুন, বাকি ফাইলগুলি সঠিকভাবে কানেক্ট করুন এবং আপনার inputs অ্যাপ্লিকেশনটি চালু করুন।