react-select typescript 升级3到4

Question

对于版本 3，我有一些这样的代码：

export const selectCustomStyles: StylesConfig = {
  control: (base) => ({
    ...base,
    background: 'white',
  }),
  option: (provided, state) => ({
    ...provided,
    color: 'white',
  })
};

export const selectCustomTheme = (theme: Theme): Theme => {
  return {
    ...theme,
    colors: {
      ...theme.colors,
      primary: '#185135',
    }
  };
};

我的选择工作正常，就像这个：

import Select, { NamedProps } from 'react-select';
import { selectCustomStyles, selectCustomTheme } from '../../utils';
// Agent is some interface different than { value: string, label: string }    

type SelectAgentProps = NamedProps<Agent>

const SelectAgent: React.FC<SelectAgentProps> = ({ ...rest }) => {
  return (
      <Select
        styles={selectCustomStyles}
        theme={selectCustomTheme}
        {...rest}
        getOptionLabel={(agent) => agent.name}
        getOptionValue={(agent) => agent.code}
      />
  );
};

export default SelectAgent;

但是现在使用版本 4，我必须将 2 generics 传递给StylesConfig类型，如下所示：

StylesConfig<MyOptionType, IsMulti>

我正在尝试使用以下方式定义这些类型：

export type MyOptionType = {
  [key: string]: string | undefined;
}

type IsMulti = false;

但我收到了这个错误：

No overload matches this call.
  Overload 1 of 2, '(props: (StateProps<Props<Agent, false, GroupTypeBase<Agent>>> &     import("/home/paulo/Documents/afex/afex-connect-web/node_modules/@types/react-    select/src/stateManager").Props<...> & import("/home/paulo/Documents/afex/afex-connect-    web/node_modules/@types/react-select/src/Select").Props<...>) | Readonly<...>): StateManager<...>', gave the     following error.
    Type 'Partial<Styles<MyOptionType, false, GroupTypeBase<MyOptionType>>>' is not assignable to type     'Partial<Styles<Agent, false, GroupTypeBase<Agent>>>'.
      Types of property 'clearIndicator' are incompatible.
        Type '((base: CSSObject, props: IndicatorProps<MyOptionType, false, GroupTypeBase<MyOptionType>>) =>     CSSObject) | undefined' is not assignable to type '((base: CSSObject, props: IndicatorProps<Agent, false,     GroupTypeBase<Agent>>) => CSSObject) | undefined'.
  Overload 2 of 2, '(props: StateProps<Props<Agent, false, GroupTypeBase<Agent>>> &     import("/home/paulo/Documents/afex/afex-connect-web/node_modules/@types/react-    select/src/stateManager").Props<...> & import("/home/paulo/Documents/afex/afex-connect-    web/node_modules/@types/react-select/src/Select").Props<...>, context: any): StateManager<...>', gave the     following error.
    Type 'Partial<Styles<MyOptionType, false, GroupTypeBase<MyOptionType>>>' is not assignable to type     'Partial<Styles<Agent, false, GroupTypeBase<Agent>>>'.  TS2769

  11 |       <Select
  12 |         className='dropDownSelectAgent'
> 13 |         styles={selectCustomStyles}
     |         ^
  14 |         theme={selectCustomTheme}
  15 |         {...rest}
  16 |         getOptionLabel={(agent) => agent.name}

知道为什么吗？

Answer 1

除了使用 CSSObject 而不是 CSSProperties 之外，我已经按照此处的说明进行操作

import { CSSObject } from '@emotion/serialize';
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: CSSObject = {
  color: "white",
  borderColor: "pink"
};

type IsMulti = false;

const selectStyle: StylesConfig<MyOptionType, IsMulti> = {
  control: (provided, state) => {
    return {
      ...provided,
      ...customControlStyles
    };
  }
};