React-এ কম্পোনেন্ট স্টাইলিং এর উন্নত পদ্ধতি

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

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

const Button = styled.input`
	background-color: orange;
	font-size: 18px;
	margin: 5px;
`;

এখন মনে করুন, আমাদের আরও একটি Button কম্পোনেন্ট দরকার, কিন্তু সাদা টেক্সট এবং সবুজ ব্যাকগ্রাউন্ড সহ।

এটি করার জন্য, আমাদের শুধুমাত্র আমাদের বিদ্যমান Button কম্পোনেন্টের উপর ভিত্তি করে একটি নতুন MdButton কম্পোনেন্ট তৈরি করতে হবে এবং এতে শুধুমাত্র সেই বৈশিষ্ট্যগুলি লিখতে হবে যা আমরা পরিবর্তন করতে চাই:

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

আসুন আমাদের Block-এ সমস্ত স্টাইল করা কম্পোনেন্ট রাখি:

function Block() {
	return (
		<Container>
			<Button>btn0</Button>
			<MdButton>btn1</MdButton>
		</Container>
	);
}

একটি খালি React কম্পোনেন্ট Block1 তৈরি করুন। Styled Components ব্যবহার করে এতে প্রস্থ এবং উচ্চতা 150px, হলুদ ব্যাকগ্রাউন্ড, এবং বর্ডার প্রস্থ 2px সহ একটি স্টাইল করা div তৈরি করুন, এটির নাম দিন DIVA।

পূর্ববর্তী কাজের div-এর উপর ভিত্তি করে একই রকম একটি div DIVB তৈরি করুন, কিন্তু সবুজ ব্যাকগ্রাউন্ড এবং 3px বর্ডার প্রস্থ সহ।

Block1-এ একটি div Container তৈরি করুন। এটির মধ্যে পূর্ববর্তী কাজগুলিতে আপনি তৈরি করা দুটি DIVA কম্পোনেন্ট এবং তাদের মধ্যে একটি DIVB কম্পোনেন্ট রাখুন।