Emotion: Emotion 11 + Typescript: theme is "any" when wrapping components with styled

[Kadrian]

Current behavior:

When using styled with an existing component, the theme prop has any type.

I'm augmenting the theme as described here, https://deploy-preview-1600--emotion.netlify.com/docs/typescript#define-a-theme

To reproduce:

• Go to: https://codesandbox.io/s/friendly-agnesi-ufbpb
• In X Hover over color, see that it's properly typed
• In Y Hover over color, see that it's any

Expected behavior:

The theme prop should be defined no matter what I'm wrapping with styled()

Environment information:

• react version: 16.13.1
• emotion version: 11.0.0-next.12

[Andarist]

I can't quite repro what you are observing, but I had a slightly different problem - that TS did not recognize the Theme being augmented with your types. I've fixed it by adding an additional import statement to:

import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme {
    color: {
      blue: string;
    };
  }
}

Could you check if this helps you?

[Kadrian]

Ah, well! Yes, that fixes it. And that's already mentioned in the docs. Missed it :-)