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

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

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

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

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

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

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

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

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