Type 'CssFunctionReturnType' is not assignable to type 'InterpolationFunction<any>'.ts(2769)

Question

Recently, I am getting an error every time I try to use the css function from styled system. It was working perfectly before without any erros. No i keep getting the error:

Type 'CssFunctionReturnType' is not assignable to type 'InterpolationFunction'.ts(2769)

Here is the code snippet, where the error happens:

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

The rest of the error message:

No overload matches this call. Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction, ...rest: Interpolation[]): StyledComponent<...>', gave the following error. Argument of type 'CssFunctionReturnType' is not assignable to parameter of type 'Interpolation'. Type 'CssFunctionReturnType' is not assignable to type 'InterpolationFunction'. Type 'CSSObject' is not assignable to type 'Interpolation'. Type 'CSSObject' is not assignable to type 'string'. Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction, ...rest: Interpolation[]): StyledComponent<...>', gave the following error. Argument of type 'CssFunctionReturnType' is not assignable to parameter of type 'Interpolation'. Type 'CssFunctionReturnType' is not assignable to type 'InterpolationFunction'.

I´m using typescript version: ^4.0.3

Answer 1

so after some trial and error, I solved the issue by importing the types for styled-components using @types/styled-components.