Question

我试图在我的打字稿react应用程序中设置我的react select组件的样式，但没有成功。当遵循文档https://react-select.com/styles#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}
 />

任何人都知道如何在Typescript中使用自定义样式并做出选择吗？谢谢。

Answer 1

您可以从“ 反应”导入CSSProperties接口，并将返回值强制转换为CSSProperties键的control：

import React, { CSSProperties } from 'react'

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

这是因为control是styleFn类型，即：

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

Answer 2

我相信您有错字：style的{{1}}道具应为Select（复数）。

通常将styles（单数）属性设为style类型。但是CSSProperties（复数）是一个对象，其函数值返回styles。因此，打字稿正在帮助您，尽管有些含糊。

在react-select中使用自定义样式时，为什么“没有重载匹配此调用” TypeScript错误？

2 个答案: