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;
`;

तीन Input कॉम्पोनेंट्स को Container में रखें:

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>
  );
}