Bạn đang gặp vấn đề với màu nền xanh mặc định khó chịu khi chọn các tùy chọn trong React Select? Bài viết này sẽ hướng dẫn bạn từng bước cách loại bỏ màu này và tùy chỉnh giao diện theo ý muốn, giúp React Select của bạn trở nên chuyên nghiệp và phù hợp với thiết kế tổng thể của ứng dụng.
React Select là một thư viện React mạnh mẽ cho phép bạn tạo các select box tùy chỉnh. Tuy nhiên, một vấn đề phổ biến mà nhiều nhà phát triển gặp phải là màu nền xanh mặc định xuất hiện khi một tùy chọn được chọn. Điều này có thể không phù hợp với bảng màu của ứng dụng và làm giảm tính thẩm mỹ của giao diện người dùng.
Một trong những cách đơn giản nhất để khắc phục vấn đề này là sử dụng thuộc tính `getOptionValue` của React Select. Thuộc tính này cho phép bạn chỉ định giá trị nào từ đối tượng tùy chọn được sử dụng để so sánh khi xác định tùy chọn nào đã được chọn.
Ví dụ, nếu bạn có một mảng các đối tượng tùy chọn như sau:
const options = [
{ code: "abc", name: "abc", available: true },
{ code: "xyz", name: "xyz", available: false },
{ code: "pqr", name: "pqr", available: true }
];
Bạn có thể sử dụng `getOptionValue` như sau:
<Select
{...input}
id={inputId}
disabled={isEditMode || disabled}
onChange={value => input.onChange(value.code)}
formatOptionLabel={formatOptionLabel}
options={options}
placeholder={placeholder}
value={input.code}
getOptionValue={(option) => option.code} // Thêm dòng này!
className={`input-components-select ${className}`}
/>
Bằng cách chỉ định `getOptionValue={(option) => option.code}`, React Select sẽ sử dụng thuộc tính `code` để so sánh, giúp tránh được lỗi màu nền xanh không mong muốn.
Một cách mạnh mẽ hơn để tùy chỉnh React Select là sử dụng thuộc tính `styles`. Thuộc tính này cho phép bạn ghi đè các kiểu mặc định của các thành phần khác nhau trong React Select, bao gồm cả màu nền của tùy chọn đã chọn.
Ví dụ:
const customStyles = {
option: (provided, state) => ({
...provided,
backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
color: "#1e2022",
padding: ".5rem 3rem .5rem .5rem",
cursor: "pointer",
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = "opacity 300ms";
return { ...provided, opacity, transition };
},
};
Sau đó, áp dụng các kiểu này vào React Select của bạn:
<Select
onChange={handleApply}
options={options}
styles={customStyles}
placeholder="Compare to Past"
/>
Trong ví dụ này, chúng ta đã ghi đè kiểu `option` và sử dụng toán tử ternary để đặt màu nền thành "rgba(189,197,209,.3)" nếu tùy chọn được chọn (`state.isSelected` là true`), và "white" nếu không.
Một phương pháp khác là sử dụng CSS kết hợp với thuộc tính `classNamePrefix`. Thuộc tính này cho phép bạn thêm một tiền tố tùy chỉnh vào tất cả các class CSS được tạo bởi React Select, giúp bạn dễ dàng nhắm mục tiêu và tùy chỉnh các thành phần của nó.
Ví dụ:
<Select
classNamePrefix="my-custom-select"
options={options}
// ... các thuộc tính khác
/>
Sau đó, bạn có thể thêm CSS tùy chỉnh vào file CSS của mình:
.my-custom-select__option.my-custom-select__option--is-selected {
background-color: #f0f0f0; /* Màu nền mong muốn */
color: #333; /* Màu chữ mong muốn */
}
.my-custom-select__option:hover {
background-color: #e0e0e0; /* Màu nền khi di chuột qua */
}
Bằng cách này, bạn có toàn quyền kiểm soát giao diện của React Select thông qua CSS.
Việc tùy chỉnh màu nền của các tùy chọn đã chọn trong React Select không chỉ giúp cải thiện tính thẩm mỹ của ứng dụng mà còn mang lại trải nghiệm người dùng tốt hơn. Bằng cách sử dụng các giải pháp được trình bày trong bài viết này, bạn có thể dễ dàng khắc phục lỗi màu xanh mặc định và tạo ra các select box phù hợp với thiết kế độc đáo của riêng bạn.
Bài viết liên quan