React 選擇自訂樣式

React Select 程式庫是開發人員建立可自訂下拉元件的熱門選擇之一。在本文中，我們將討論如何在 React Select 中建立樣式或自訂樣式，以建立適合應用程式主題和 UI 設計的外觀。

為什麼要選 React Select？
React Select 可輕鬆實現具有搜尋、多項選擇和可自訂選項等功能的靈活下拉式選單。但是，預設外觀可能並不總是適合設計需求，因此我們需要添加自訂樣式，以便下拉式選單與應用程式的外觀融合。

在專案中使用 React Select
要使用 React Select，請先安裝其相依性：

npm install react-select

然後，將其匯入元件並建立基本下拉清單：

import Select from 'react-select';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

function MySelect() {
  return <Select options={options} />;
}

客製化風格

自訂元件 React Select
建立 1 個新文件，並用以下腳本填滿它

import Select from 'react-select'

const CustomSelectComponent = ({ onChange, options, value, placeholder }: any) => {

    const defaultValue = (options: any, value: any) => {
        return options ? options.find((option: any) => option.value === value) : ''
    }

    const customStyles = {
        option: (provided: any, state: { isSelected: any }) => ({
            ...provided,
            color: state.isSelected ? '#AB0202' : '#000000',
            background: state.isSelected ? '#F4F7F9' : '#FFFFFF',
            opacity: 1,
            '&:hover': {
                backgroundColor: '#FCC2C2',
                cursor: 'pointer',
            },
        }),
        menuPortal: (base: any) => ({ ...base, zIndex: 9999 }),
        control: (base: any, state: any) => ({
            ...base,
            background: '#F7F7F7',
            borderColor: '#C0C4D6',
            '&:hover': {
                borderColor: state.isFocused ? '#F7F7F7' : 'blue',
                cursor: 'pointer',
            },
        }),
        singleValue: (provided: any, state: { isDisabled: any }) => {
            const opacity = state.isDisabled ? 1 : 1
            const transition = 'opacity 300ms'

            return { ...provided, opacity, transition }
        },
    }

    return (
        <Select
            value={defaultValue(options, value)}
            onChange={(value) => onChange(value)}
            options={options}
            placeholder={placeholder}
            styles={customStyles}
            menuPortalTarget={document.body}
        />
    )
}

export default CustomSelectComponent

上面組件中各prop的作用

• onChange 是每次下拉選項發生變更時執行的回呼函數。

• options 是一個物件數組，代表下拉清單中可用的選項。

• value 是目前從下拉清單中選擇的值。此屬性用於設定目前在下拉清單中選擇的選項。

• 佔位符是在選擇選項之前顯示為使用者指南的文字。此文字將顯示在下拉清單中，作為選擇選項的指南。

2.如何使用CustomSelectComponent

使用方法如下

import CustomSelectComponent from './SelectComponent'

const App = () => {

    const [value, setValue] = useState('')
    const options = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
    ];

    return (
        <>
            <CustomSelectComponent
                placeholder={'Category'}
                value={value}
                options={options}
                onChange={(value: any) => {
                    setValue(value.value)
                }}
            />
        </>)
}

export { App }

以上是React 選擇自訂樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！