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

Props cũng có thể được sử dụng cho conditional rendering. Hãy lấy component React Block mà chúng ta đã làm việc ở bài học trước.

Chúng ta sẽ làm sao cho nền của input đầu tiên có màu vàng, còn các input khác có màu xanh lục. Để làm điều này, thêm một dòng vào kiểu cho component Input và sẽ có:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

Thêm prop first vào input đầu tiên:

<Container>
	<Input first />
	<Input placeholder="tên" type="text" />
	<Input type="password" />
</Container>

Sử dụng conditional rendering được đề cập trong phần lý thuyết của bài học, hãy sửa đổi mã giải pháp cho bài học trước sao cho khi có prop warn, văn bản của nút sẽ có màu đỏ và nền của nó có màu vàng, còn không có prop đó thì nền có màu xanh lục và văn bản màu trắng. Hãy truyền prop warn cho nút thứ hai.