Блог

Я хотел бы знать, как красиво добавлять типы к выбору с помощью react-select.

Компонент пока выглядит так:

 const Select: React.FC<Select> = (
  {defaultValue, onChange, options}: Select) => (
  <ReactSelect
    styles={selectStyles}
    …
  </ReactSelect>
  

и определение selectStyles :

 interface HoverProps {
  bowShadow: string
  border: string
}

interface ControlComponentCSSProperties extends CSSProperties {
  'amp;:hover': HoverProps
}

const selectStyles = {
  control: (
    provided: CSSProperties,
    state: Props<{label: string; value: string}> | Props<Record<string, unknown>>
  ): ControlComponentCSSProperties => ({
    ...provided,
    'amp;:hover': {
      bowShadow: 'none',
      border: 'none',
    },
    border: 'none',
    borderRadius: input.border.radius,
    borderBottomLeftRadius: state.menuIsOpen ? 0 : input.border.radius,
    borderBottomRightRadius: state.menuIsOpen ? 0 : input.border.radius,
    …
  

Это проходит, tsc но, конечно, есть более простые способы ввести этот selectStyles объект.

Был бы признателен за вашу помощь, указывающую мне лучшее направление. Приветствия!

Вы можете ввести весь объект стиля с помощью StyleConfig , что устраняет необходимость вводить все параметры вручную. Но перед этим вам нужно будет установить @types/react-select пакет.

StyleConfig требуется передать как минимум 2 переменные общего типа в соответствии с этим объявлением здесь.

• OptionType : Тип параметра react-select . Согласно этому, по умолчанию OptionType является { label: string; value: string }
• IsMulti : логическое значение, чтобы определить, можно ли выбрать несколько значений.

Собрав все это вместе, мы получим что-то вроде этого:

 import Select, { StylesConfig } from 'react-select';

type MyOptionType = {
  label: string;
  value: string;
};

const options: MyOptionType[] = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const customControlStyles: CSSProperties = {
  color: "white",
  borderColor: "pink"
};

type IsMulti = false;

const selectStyle: StylesConfig<MyOptionType, IsMulti> = {
  control: (provided, state) => {
    // provided has CSSObject type
    // state has ControlProps type

    // return type is CSSObject which means this line will throw error if uncommented
    // return false;

    return {
      ...provided,
      ...customControlStyles
    };
  }
};
  

 export function App() {
  return (
    <Select options={options} styles={selectStyle} />
  );
}
  

Живая демонстрация