Styling Lanjutan Komponen di React

Misalkan kita memiliki komponen React Block dan kita telah membuat komponen Button dan Container yang telah digayakan menggunakan Styled Components di dalamnya:

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

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

Sekarang bayangkan kita membutuhkan komponen Button lainnya, hanya dengan teks tombol berwarna putih dan latar belakang hijau.

Untuk melakukan ini, kita cukup membuat komponen baru MdButton berdasarkan komponen Button kita dan menuliskan hanya properti yang ingin kita ubah di dalamnya:

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

Mari tempatkan semua komponen yang telah digayakan kita di Block:

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