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 компоненти керак, фақат тугманинг matni oқ фон билан яшил рангда.

Буни амалга ошириш учун бизнинг Button компонентимиз асосида яна бир MdButton компонентини яратиб, унда фақат ўзгартирмоқчи бўлган хусусиятларимизни ёзишимиз кифоя:

Block.jsconst MdButton = styled(Button)`
  color: white;
  background-color: green;
`;

Block ичида барча стилланган компонентларимизни жойлаштирамиз:

jsxfunction Block() {
  return (
    <Container>
      <Button>btn0</Button>
      <MdButton>btn1</MdButton>
    </Container>
  );
}