styled types do not support object notation

Current behavior:

styled types do not support object notation.

According to the documentation (https://emotion.sh/docs/typescript#passing-props), it should be possible to write

interface ImageProps {
  src: string;
  width: number;
};

const Image1 = styled('div')(
  {
    backgroundSize: 'contain',
  },
  (props: ImageProps) => ({
    width: props.width,
    background: `url(${props.src}) center center`,
  })
);

but it give me that error locally

Argument of type '{ backgroundSize: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
Object literal may only specify known properties, and 'backgroundSize' does not exist in type 'TemplateStringsArray'.ts(2345)

Looking at the types test (https://github.com/emotion-js/emotion/blob/master/packages/styled/types/tests.tsx) it only seems that string literals are supported.

Where types for object notation supported? Is it a bug?

Environment information:

"@emotion/core": "10.0.14"
"@emotion/is-prop-valid": "0.8.2"
"@emotion/styled": "10.0.14"
"react": "^16.8.6"

[Andarist]

The preferred way to pass a props type to styled is:

const Image = styled("div")<ImageProps>(
  {
    backgroundSize: "contain",
    zIndex: 30
  },
  (props) => ({
    width: props.width,
    background: `url(${props.src}) center center`
  })
);

It’s the most “correct one” - because it’s a central place where you can put it and thus have it available in all interpolations automatically.

Also when dealing with overloads TS always tries to match top-down and if it doesn’t find a match then it reports the error about the last unmatched overload. I suspect that it couldn’t match the first one for you because you have annotated props inside your interpolation, but that typing was too restrictive (? not sure about exact reason though) and it didn’t match against “expected” Props & { theme: any }. It then has tried to match against the second one but that one failed quickly because the first argument was not a template.

[Andarist]

Which tsconfig.json are you using? I can always reproduce it

Hard to tell exactly - codesandbox uses CRA template, so it should be some shape of this. Please provide a repository with the issue reproduced so we can reliably investigate this.

@eriktoyra

Can’t reproduce your issue on codesandbox. Please provide a repository with the issue reproduced so we can reliably investigate this 😉