类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction<any>”.ts(2769)

Question

最近，每次我尝试使用样式系统中的 css 函数时都会遇到错误。 它以前工作得很好，没有任何错误。不，我一直收到错误：

类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction”.ts(2769)

这里是代码sn-p，错误发生的地方：

const FlexCol6Left = styled(FlexCol6 as any)`
  padding-top: 0;
  ${css({
    paddingLeft: ['0', '0', '0'],
  })}
`;

错误信息的其余部分：

没有重载匹配这个调用。重载 1 of 3, '（第一： 模板字符串数组 | CSS 对象 |插值函数， ...rest: Interpolation[]): StyledComponent<...>'，给出了 以下错误。 “CssFunctionReturnType”类型的参数不能分配给“插值”类型的参数。 类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction”。 类型“CSSObject”不可分配给类型“插值”。 类型“CSSObject”不可分配给类型“字符串”。重载 2 of 3, '(first: TemplateStringsArray | CSSObject | 插值函数，...休息：插值[]）： StyledComponent<...>'，给出了以下错误。 “CssFunctionReturnType”类型的参数不能分配给“插值”类型的参数。 类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction”。

我正在使用 typescript 版本：^4.0.3

Answer 1

所以经过反复试验，我通过使用@types/styled-components 导入样式组件的类型解决了这个问题。