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:

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

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

Mari tempatkan semua komponen yang telah digayakan kita di Block:

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

Buatlah komponen React kosong Block1. Dengan menggunakan Styled Components, buatlah sebuah div yang digayakan di dalamnya dengan lebar dan tinggi 150px, latar belakang kuning, dan lebar border 2px, beri nama DIVA.

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

Di dalam Block1 buatlah sebuah div Container. Tempatkan dua komponen DIVA dan di antara mereka satu komponen DIVB, yang telah Anda buat pada tugas-tugas sebelumnya untuk pelajaran ini.