React-da Komponentlerin Genislendirilmiş Stillesdirilmesi

Ferez edek ki, bizim React komponentimiz Block var ve biz onda Styled Components vasitesile stilize edilmis Button ve Container komponentleri yaratmışıq:

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Button = styled.input`
  background-color: orange;
  font-size: 18px;
  margin: 5px;
`;

Indi ise tesevvur edek ki, bizim daha bir Button komponentine ehtiyacımız var, amma ag rengli metn ve yasil fonla.

Bunun ucun bizim Button komponentimiz esasında yeni MdButton komponenti yaradıb, onda sadece deyismek istediyimiz xususiyyetleri yaza bilerik:

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

Gelin Block-da butun stilize komponentlerimizi yerlesdirek:

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