კომპონენტების გაფართოებული სტილიზაცია 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>
  );
}