반응 맞춤 스타일 선택

React Select 라이브러리는 개발자가 사용자 정의 가능한 드롭다운 구성 요소를 만드는 데 널리 사용되는 선택 중 하나입니다. 이번 글에서는 애플리케이션의 테마와 UI 디자인에 어울리는 외관을 만들기 위해 React Select에서 스타일이나 커스텀 스타일을 생성하는 방법에 대해 알아보겠습니다.

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 선택
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는 드롭다운에서 사용할 수 있는 옵션을 나타내는 개체 배열입니다.

• 값은 드롭다운에서 현재 선택된 값입니다. 이 속성은 드롭다운에서 현재 선택된 옵션을 설정하는 데 사용됩니다.

• 자리 표시자는 옵션을 선택하기 전에 사용자 가이드로 표시되는 텍스트입니다. 이 텍스트는 옵션 선택에 대한 안내로 드롭다운에 표시됩니다.

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 }

위 내용은 반응 맞춤 스타일 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!