TS2769: No overload matches this call - emotion@11, emotion@10

[mrkosima]

According to docs, it should be possible to style components with objects and functions -
v10, v11

E.g.:

const theme = {
  bg: "#333",
  color: "white",
  p: "10px"
};

const base = ({ theme }) => ({
  color: theme.color,
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  border: "1px solid gray",
  fontFamily: "monospace"
});

const padding = ({ theme }) => ({
  padding: theme.p
});

const background = ({ theme }) => ({
  backgroundColor: theme.bg
});

const Text = styled("p")(base, padding, background);

But I'm getting the error at styled("p")(base, padding, background):

No overload matches this call.
  Overload 1 of 3, '(...styles: Interpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & { ...; } & { ...; }>[]): StyledComponent<...>', gave the following error.
    Argument of type '({ theme }: { theme: any; }) => { color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to parameter of type 'Interpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & { ...; } & { ...; }>'.
      Type '({ theme }: { theme: any; }) => { color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to type 'FunctionInterpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & { ...; } & { ...; }>'.
        Type '{ color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to type 'Interpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & { ...; } & { ...; }>'.
          Type '{ color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to type 'CSSObject'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | "sticky" | PositionProperty[] | undefined'.
  Overload 2 of 3, '(template: TemplateStringsArray, ...styles: Interpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<...> & { ...; }>[]): StyledComponent<...>', gave the following error.
    Argument of type '({ theme }: { theme: any; }) => { color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
      Type '({ theme }: { theme: any; }) => { color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 18 more.
  Overload 3 of 3, '(template: TemplateStringsArray, ...styles: Interpolation<{ theme?: Theme | undefined; } & ClassAttributes<HTMLParagraphElement> & HTMLAttributes<...> & { ...; } & { ...; }>[]): StyledComponent<...>', gave the following error.
    Argument of type '({ theme }: { theme: any; }) => { color: any; position: string; top: string; left: string; transform: string; border: string; fontFamily: string; }' is not assignable to parameter of type 'TemplateStringsArray'

Environment:

• "react": "16.13.1"
• "typescript": "3.9.3"

v11:

• "@emotion/react": "11.0.0-next.12"
• "@emotion/styled": "11.0.0-next.12"

v10:

• "@emotion/core": "10.0.27"
• "@emotion/styled": "10.0.27"
• "emotion-theming": "10.0.27"

To reproduce:

Here's a sandbox for v11.
https://codesandbox.io/s/emotion11-ts2769-h0t4v

The issue is the same for v10.

[mrkosima]

There's a similar issue #1640, but it's quite old and related to rebass

[Andarist]

You must often type your object styles as CSSObject: https://codesandbox.io/s/emotion11-ts2769-m28iu?file=/src/index.tsx (or use const assertion)

This is related to TS' "type widening" and you can read more about it here, here and here.

[mrkosima]

@Andarist , good to know, thanks for a quick reply!

[rarenatoe]

Is there any way to make this work with this?

const genericStyle = props => css`
    color: ${ props => props.color }
`

I keep getting this interpolation error on typescript whether I add CSSObject type or not.

[Kif11]

Is there any way to make this work with this?

const genericStyle = props => css`
    color: ${ props => props.color }
`

I keep getting this interpolation error on typescript whether I add CSSObject type or not.

Same problem. Pretty obscure error. Is there any solution? I tried to look for an exported CSS type under @emotion/react but no luck.