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:

const 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:

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

Mari letakkan dalam Block semua komponen bergaya kami:

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

Cipta komponen React kosong Block1. Dengan menggunakan Styled Components, ciptalah di dalamnya satu div bergaya dengan lebar dan tinggi 150px, latar belakang kuning, dan lebar sempadan 2px, namakannya DIVA.

Berdasarkan div dari tugas sebelumnya, ciptalah div yang sama DIVB, hanya dengan latar belakang hijau dan lebar sempadan 3px.

Dalam Block1 cipta div Container. Letakkan di dalamnya dua komponen DIVA dan di antara mereka satu DIVB, yang dicipta oleh anda dalam tugas sebelumnya untuk pelajaran ini.