React カスタム スタイルの選択

React Select ライブラリは、カスタマイズ可能なドロップダウン コンポーネントを作成する開発者にとって人気のある選択肢の 1 つです。この記事では、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} />;
}

カスタムスタイル

カスタムコンポーネントの反応選択
新しいファイルを 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

上記コンポーネントの各プロパティの機能

• onChange は、ドロップダウン オプションに変更が発生するたびに実行されるコールバック関数です。

• options は、ドロップダウンで利用可能なオプションを表すオブジェクトの配列です。

• 値は、ドロップダウンから現在選択されている値です。このプロパティは、ドロップダウンで現在選択されているオプションを設定するために使用されます。

• プレースホルダーは、オプションが選択される前にユーザー ガイドとして表示されるテキストです。このテキストは、オプションを選択するためのガイドとしてドロップダウンに表示されます。

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 中国語 Web サイトの他の関連記事を参照してください。