Sử dụng Props với Styled Components trong React

Từ bài học trước, chúng ta đã biết rằng các component được tạo kiểu bằng thư viện Styled Components có thể được sử dụng như các component React thông thường. Trong bài học này, chúng ta sẽ thấy rằng props cũng hoạt động tương tự ở đây.

Giả sử chúng ta có component React Block và chúng ta đã tạo trong đó các component được tạo kiểu bằng Styled Components Input và Container:

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

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Hãy đặt ba component Input vào trong Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Sử dụng props, chúng ta có thể thiết lập các thuộc tính khác nhau trong các component. Hãy thiết lập cho input thứ hai các thuộc tính placeholder và type với giá trị lần lượt là name và text, và cho input thứ ba, thiết lập cho thuộc tính type giá trị password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Tạo một component React trống Block, tạo trong đó một div chứa ba nút bấm. Sử dụng thư viện Styled Components, tạo kiểu cho div và các nút bấm này. Sử dụng props, hãy vô hiệu hóa nút bấm đầu tiên, và làm cho nút thứ ba có kiểu reset.