Styled Components के साथ React में सशर्त रेंडरिंग में प्रॉप्स का उपयोग

प्रॉप्स का उपयोग सशर्त रेंडरिंग के लिए भी किया जा सकता है। आइए React कंपोनेंट Block को लें, जिसके साथ हमने पिछले पाठ में काम किया था।

आइए ऐसा करें कि पहले इनपुट के लिए बैकग्राउंड पीला हो, और अन्य इनपुट्स के लिए हरा हो। इसके लिए, कंपोनेंट Input के लिए स्टाइल्स में एक और लाइन जोड़ेंगे और यह इस प्रकार होगा:

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

पहले इनपुट में प्रॉप first जोड़ें:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>