Tạo kiểu nâng cao cho các thành phần trong React

Giả sử chúng ta có một thành phần React Block và chúng ta đã tạo trong đó các thành phần được tạo kiểu bằng Styled Components là Button và Container:

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

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

Và bây giờ hãy tưởng tượng rằng chúng ta cần một thành phần Button nữa, chỉ khác là với văn bản màu trắng và nền màu xanh lá cây.

Để làm điều này, chúng ta chỉ cần dựa trên thành phần Button của mình để tạo một thành phần mới MdButton và chỉ định trong đó chỉ những thuộc tính mà chúng ta muốn thay đổi:

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

Hãy đặt trong Block tất cả các thành phần được tạo kiểu của chúng ta:

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

Tạo một thành phần React trống Block1. Sử dụng Styled Components để tạo trong đó một div được tạo kiểu với chiều rộng và chiều cao là 150px, nền màu vàng, và độ rộng đường viền là 2px, đặt tên nó là DIVA.

Dựa trên div từ bài tập trước, hãy tạo một div tương tự DIVB, chỉ khác là có nền màu xanh lá cây và độ rộng đường viền là 3px.

Trong Block1, hãy tạo một div Container. Đặt trong đó hai thành phần DIVA và giữa chúng một thành phần DIVB, do bạn tạo trong các bài tập trước của bài học này.