我的反应项目“react”：“^18.2.0”版本和“react-select”：“5.4.0”版本出现错误

Question

我的react项目使用“react”：“^18.2.0”版本和“react-select”：“5.4.0”版本，今天出现错误，该项目直到昨天都运行顺利。

当我尝试构建我的项目时，它给了我以下错误。

TS2322: Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObjectWithLabel'.   Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObject'.
    Property 'accentColor' is incompatible with index signature.
      Type 'AccentColor | readonly string[] | AccentColor[]' is not assignable to type 'CSSInterpolation'.
        Type 'readonly string[]' is not assignable to type 'CSSInterpolation'.
          Type 'readonly string[]' is not assignable to type 'ArrayCSSInterpolation'.
    17 | const customStyles: StylesConfig<ISelectorOption> = {
    18 |   menuPortal: (styles, _): CSSObjectWithLabel => {

   19 |     return {
       |     ^^^^^^^^
   20 |       ...styles,
       | ^^^^^^^^^^^^^^^^
   21 |       color: THEME.defaultHighLightColor,
       | ^^^^^^^^^^^^^^^^
   22 |       zIndex: 9999,
       | ^^^^^^^^^^^^^^^^
   23 |     };
       | ^^^^^^^

    24 |   },
    25 |   control: (styles, { isDisabled }): CSSObjectWithLabel => {
    26 |     return {

我尝试删除node_modules和package.lock.json并导入react-select 5.4.0确切版本仍然遇到同样的问题

Answer 1

作为解决方法，您可以对覆盖列表中的每个条目使用类型断言：

menuPortal: (styles, _): CSSObjectWithLabel => {
   return {
     ...styles,
     color: THEME.defaultHighLightColor,
     zIndex: 9999,
   } as CSSObjectWithLabel;
}

您也可以删除函数上的类型声明。

使用

react-select

，可能需要解决方法。截至撰写本文时，库的类型定义似乎需要一些改进。