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

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

Block.jsconst 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 কম্পোনেন্ট তৈরি করতে হবে এবং এতে শুধুমাত্র সেই বৈশিষ্ট্যগুলি লিখতে হবে যা আমরা পরিবর্তন করতে চাই:

Block.jsconst MdButton = styled(Button)`
  color: white;
  background-color: green;
`;

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

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