当在react-select中使用自定义样式时，为什么会出现 "No overload matches this call "的TypeScript错误？

Question

我试图在我的typecript react应用程序中为我的react select组件设置样式，但没有成功。当我按照文档中的要求 https:/react-select.comstyles#provided-styles-and-state我得到以下错误信息。

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReactSelectProps<string>>): ReactSelectClass<string>', gave the following error.
    Type '{ control: () => { width: number; }; }' has no properties in common with type 'CSSProperties'.
  Overload 2 of 2, '(props: ReactSelectProps<string>, context?: any): ReactSelectClass<string>', gave the following error.
    Type '{ control: () => { width: number; }; }' has no properties in common with type 'CSSProperties'.  TS2769

代码示例。

const inputStyle = {
    control: () => ({

        width: 200,
      }),

<Select 
       name="Name"
       options={options}
       style={inputStyle}
 />

有谁知道如何使用typecript和react select的自定义样式吗？

Answer 1

我相信你有一个拼写错误：the style 榰 Select 应是 styles (复数)。

该 style 异性 是 应属 CSSProperties. 但是... styles (复数)是一个带有函数值的对象，返回的是 CSSProperties. 所以typescript在那里帮助你，虽然有点神秘。

Answer 2

你可以导入 CSSProperties 接口从'反应'，并将返回值转换为 CSSProperties 你的 control 关键。

import React, { CSSProperties } from 'react'

const inputStyle = {
  control: () => ({
    width: 200,
  } as CSSProperties),
}

这是因为 control 是 styleFn 型，它是：

type styleFn = (base: CSSProperties, state: any) => CSSProperties;