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