Réagir Sélectionnez un style personnalisé

La bibliothèque React Select est l'un des choix populaires des développeurs pour créer des composants déroulants personnalisables. Dans cet article, nous verrons comment créer un style ou un style personnalisé dans React Select pour créer une apparence adaptée au thème et à la conception de l'interface utilisateur de l'application.

Pourquoi choisir React Select ?
React Select facilite la mise en œuvre de listes déroulantes flexibles avec des fonctionnalités telles que la recherche, la sélection multiple et les options personnalisables. Cependant, l'apparence par défaut ne répond pas toujours aux besoins de conception. Nous devons donc ajouter un style personnalisé afin que la liste déroulante se fonde dans l'apparence de l'application.

Utiliser React Select dans les projets
Pour utiliser React Select, installez d'abord ses dépendances :

npm install react-select

Ensuite, importez-le dans le composant et créez une liste déroulante de base :

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

Style personnalisé

Sélection de réaction de composant personnalisé
créez 1 nouveau fichier et remplissez-le avec le script suivant

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

La fonction de chaque accessoire dans le composant ci-dessus

• onChange est une fonction de rappel qui est exécutée chaque fois qu'une modification se produit dans les options déroulantes.

• options est un tableau d'objets qui représentent les options disponibles dans la liste déroulante.

• value est la valeur actuellement sélectionnée dans la liste déroulante. Cette propriété est utilisée pour définir quelle option est actuellement sélectionnée dans la liste déroulante.

• l'espace réservé est un texte affiché sous forme de guide de l'utilisateur avant la sélection d'une option. Ce texte sera affiché dans la liste déroulante comme guide pour sélectionner une option.

2.Comment utiliser CustomSelectComponent

voici comment l'utiliser

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 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!