React 18.2.0+react-select 5.4.0项目构建报TS2322错误求助

问题场景 #

使用react: ^18.2.0和react-select: 5.4.0的项目，此前构建正常，今日突然触发TS2322类型错误，核心报错信息：

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'.

错误指向menuPortal样式的返回对象：

const customStyles: StylesConfig<ISelectorOption> = {
  menuPortal: (styles, _): CSSObjectWithLabel => {
    return {
      ...styles,
      color: THEME.defaultHighLightColor,
      zIndex: 9999,
    };
  },
  // 其他样式定义
};

已尝试删除node_modules、package.lock.json并重新安装指定版本react-select，问题未解决。

修复方案 #

方案1：剔除不兼容CSS属性 #

问题根源是styles对象包含accentColor这类类型不匹配的属性，扩展时手动剔除即可：

menuPortal: (styles, _): CSSObjectWithLabel => {
  // 剔除类型冲突的属性
  const { accentColor, ...restStyles } = styles;
  return {
    ...restStyles,
    color: THEME.defaultHighLightColor,
    zIndex: 9999,
  };
},

方案2：类型断言临时绕过（不推荐长期使用） #

若需快速完成构建，可通过类型断言跳过TS检查：

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

方案3：锁定兼容依赖版本 #

这类类型冲突通常由csstype或@types/styled-components的版本变动导致，可锁定兼容版本：

1. 在package.json中添加版本锁定：

"resolutions": {
  "csstype": "^3.1.2"
}

2. 重新安装依赖：

npm install

内容的提问来源于stack exchange，提问作者Vennela Jajiri