React-da komponentleri giňişleýin stilizasiýa

Bizde React komponenti Block bardyr we biz onda Styled Components ýardamy bilen stilizirlenen Button we Container komponentlerini döretdik diýip gürläň:

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 bolsa, bizde ýene bir Button komponenti gerek, ýöne aky tekst we ýaşyl fon bilen.

Bun üçin, bizim Button komponentimiziň esasynda täze MdButton komponentini döretmek we onda diňe üýtgetmek isleýän häsiýetlerimizi ýazmak ýeterlikdir:

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

Block komponentinde ähli stilizirlenen komponentlerimizi ýerleşdireýliň:

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