React Pilih Gaya Tersuai-tutorial js-php.cn

React Pilih Gaya Tersuai

DDD

Lepaskan： 2024-11-15 20:02:02

asal

915 orang telah melayarinya

React Select Custom Style

Pustaka React Select ialah salah satu pilihan popular bagi pembangun untuk mencipta komponen lungsur turun yang boleh disesuaikan. Dalam artikel ini, kita akan membincangkan cara mencipta gaya atau gaya tersuai dalam React Select untuk mencipta penampilan yang sesuai dengan tema dan reka bentuk UI aplikasi.

Mengapa Pilih React Select?
React Select memudahkan anda melaksanakan dropdown fleksibel dengan ciri seperti carian, pilihan berbilang dan pilihan yang boleh disesuaikan. Walau bagaimanapun, penampilan lalai mungkin tidak selalu sesuai dengan keperluan reka bentuk, jadi kami perlu menambah gaya tersuai supaya menu lungsur sebati dengan penampilan aplikasi.

Menggunakan React Select dalam Projek
Untuk menggunakan React Select, pasang kebergantungannya dahulu:

npm install react-select

Salin selepas log masuk

Kemudian, importnya ke dalam komponen dan buat menu lungsur asas:

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} />;
}

Salin selepas log masuk

Gaya Tersuai

Pilih Tindak Balas Komponen Tersuai
buat 1 fail baharu, dan isikan dengan skrip berikut

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

Salin selepas log masuk

Fungsi setiap prop dalam komponen di atas

onChange ialah fungsi panggil balik yang dilaksanakan setiap kali perubahan berlaku pada pilihan lungsur turun.
pilihan ialah susunan objek yang mewakili pilihan yang tersedia dalam menu lungsur.
nilai ialah nilai yang dipilih pada masa ini daripada menu lungsur. Sifat ini digunakan untuk menetapkan pilihan yang sedang dipilih dalam menu lungsur.
pemegang tempat ialah teks yang dipaparkan sebagai panduan pengguna sebelum pilihan dipilih. Teks ini akan dipaparkan dalam menu lungsur sebagai panduan untuk memilih pilihan.

2.Cara menggunakan CustomSelectComponent

begini cara menggunakannya

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 }

Salin selepas log masuk

Atas ialah kandungan terperinci React Pilih Gaya Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!