Penggayaan Lanjutan Komponen dalam React

Katakanlah kita mempunyai komponen React Block dan kami telah mencipta di dalamnya komponen bergaya menggunakan Styled Components Button dan 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;
`;

Sekarang bayangkan kita memerlukan satu lagi komponen Button, hanya dengan teks butang berwarna putih dan latar belakang hijau.

Untuk ini, kita boleh berdasarkan komponen Button kami mencipta komponen baru MdButton dan tentukan di dalamnya hanya sifat yang ingin kami ubah:

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

Mari letakkan dalam Block semua komponen bergaya kami:

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