Declaring Theme interface for @emotion/react module breaks typings of returned values of styled and withComponent

Current behavior:

When I add

declare module '@emotion/react' {
  export {Theme} from 'somewhere';
}

typings for theme prop is correctly set, but whenever type of styled(Element) becomes StyledComponent<any, {}>. If I remove the above declaration, the type of styled(Element) becomes

StyledComponent<Props & etc>

which is correct.

Also import {ThemeProvider} from '@emotion/react'; doesn’t work unless I add export {ThemeProvider} from '@emotion/react'; to the declaration.

To reproduce:

Add this declaration to your code:

declare module '@emotion/react' {
  export {Theme} from 'somewhere';
}

Expected behavior:

Providing theme typing don’t break other stuff.

Environment information:

• react 16.12.0
• emotion version: 11.0.0-next.10

[Djiit]

@sassanh Worked like a charm. Thank you!

Note that I was able to do this, reusing my actual Theme typings :

import "@emotion/react";

import { Theme as EmotionTheme } from "./styles/theme";

declare module "@emotion/react" {
  export interface Theme extends EmotionTheme {}
}

[sassanh]

By tracing the issue in styled-components to see how it’s resolved there, I found a workaround specially by reading https://github.com/styled-components/styled-components-website/issues/447

After some trial and error I found that declaring an emotion.d.ts (or whatever) file which contains:

import '@emotion/react';

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

resolves both issues, importing @emotion/react on top of the file fixes the problem of ThemeProvider (and other exports of emotion) not being available.

And to fix theme being of type any you have to declare the theme completely in module declaration instead of declaring it in another file and import and re-exporting it here.