Reagieren Wählen Sie einen benutzerdefinierten Stil

Die React Select-Bibliothek ist eine der beliebtesten Optionen für Entwickler, um anpassbare Dropdown-Komponenten zu erstellen. In diesem Artikel besprechen wir, wie Sie in React Select einen Stil oder einen benutzerdefinierten Stil erstellen, um ein Erscheinungsbild zu erstellen, das zum Thema und UI-Design der Anwendung passt.

Warum React Select wählen?
React Select erleichtert die Implementierung flexibler Dropdowns mit Funktionen wie Suche, Mehrfachauswahl und anpassbaren Optionen. Allerdings entspricht das Standard-Erscheinungsbild möglicherweise nicht immer den Designanforderungen, daher müssen wir einen benutzerdefinierten Stil hinzufügen, damit das Dropdown-Menü mit dem Erscheinungsbild der Anwendung harmoniert.

React Select in Projekten verwenden
Um React Select zu verwenden, installieren Sie zunächst seine Abhängigkeiten:

npm install react-select

Dann importieren Sie es in die Komponente und erstellen ein einfaches Dropdown:

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

Benutzerdefinierter Stil

Benutzerdefinierte Komponentenreaktionsauswahl
Erstellen Sie eine neue Datei und füllen Sie sie mit dem folgenden Skript

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

Die Funktion jeder Requisite in der obigen Komponente

• onChange ist eine Rückruffunktion, die jedes Mal ausgeführt wird, wenn eine Änderung an den Dropdown-Optionen auftritt.

• Optionen ist ein Array von Objekten, die die im Dropdown verfügbaren Optionen darstellen.

• Wert ist der aktuell ausgewählte Wert aus der Dropdown-Liste. Mit dieser Eigenschaft wird eingestellt, welche Option aktuell im Dropdown ausgewählt ist.

• Platzhalter ist Text, der als Benutzerführung angezeigt wird, bevor eine Option ausgewählt wird. Dieser Text wird im Dropdown-Menü als Leitfaden zur Auswahl einer Option angezeigt.

2.So verwenden Sie CustomSelectComponent

Hier erfahren Sie, wie Sie es verwenden

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 }

Das obige ist der detaillierte Inhalt vonReagieren Wählen Sie einen benutzerdefinierten Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!