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