React'ta Bileşenler için Gelişmiş Stil Verme

Diyelim ki bir React bileşenimiz var Block ve içinde Styled Components kullanarak stilize edilmiş Button ve Container bileşenleri oluşturduk:

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

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

Şimdi hayal edelim, bir tane daha Button bileşenine ihtiyacımız var, ancak beyaz yazı rengi ve yeşil arka plan rengi olan.

Bunun için, mevcut Button bileşenimiz temel alınarak yeni bir MdButton bileşeni oluşturmamız ve içinde sadece değiştirmek istediğimiz özellikleri belirtmemiz yeterli:

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

Block bileşeninde tüm stilize edilmiş bileşenlerimizi yerleştirelim:

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