Styled Components ব্যবহার করে React-এ প্রপ্স ব্যবহার

গত পাঠ থেকে আমরা জেনেছি যে Styled Components লাইব্রেরি ব্যবহার করে স্টাইল করা কম্পোনেন্টগুলো সাধারণ React কম্পোনেন্টের মতো ব্যবহার করা যায়। এই পাঠে আমরা দেখব যে এখানে প্রপ্সও একইভাবে কাজ করে।

ধরুন আমাদের একটি React কম্পোনেন্ট রয়েছে Block এবং আমরা এতে Styled Components ব্যবহার করে স্টাইল করা কম্পোনেন্ট তৈরি করেছি Input এবং Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Container-এর মধ্যে তিনটি Input কম্পোনেন্ট রাখি:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

প্রপ্স ব্যবহার করে, আমরা কম্পোনেন্টে বিভিন্ন অ্যাট্রিবিউট সেট করতে পারি। দ্বিতীয় ইনপুটটিতে placeholder এবং type অ্যাট্রিবিউট সেট করি যথাক্রমে name এবং text মান সহ, এবং তৃতীয় ইনপুটটির type অ্যাট্রিবিউটে password মান সেট করি:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

একটি খালি React কম্পোনেন্ট Block তৈরি করুন, এর মধ্যে একটি div তৈরি করুন যাতে তিনটি বাটন থাকবে। Styled Components লাইব্রেরি ব্যবহার করে, এই div এবং বাটনগুলোর স্টাইল করুন। প্রপ্স ব্যবহার করে, প্রথম বাটনটি নিষ্ক্রিয় করুন এবং তৃতীয়টির টাইপ reset করুন।