score:1

Continuing on @chatian's helpful answer, after you've made the .d.ts file, then put it somewhere in your project, e.g., in the "src" folder, and specify it as an "ambient file" to be used by the TS runtime of your editor by adding its directory path, i.e. "src", in the "include" array of your tsconfig.json file.

Now you should be able to use both your own types and import the types you extend from emotion in your tsx files, e.g., import { Theme } from "@emotion/react".

An example codesandbox: https://codesandbox.io/s/9z2md?file=/src/global.d.ts

Notice since the Theme type in the above example is not "extending" emotion's Theme type then you don't need to import it at all and you have access to it globally.

(note: this sandbox was not created by me so credit goes to nerdyman.)

score:2

Emotion 11 simplified this.

Define your Theme in an emotion.d.ts file

   declare module '@emotion/react' {
      export interface Theme {
        colors : {
          primary: string;
          secondary: string;
        };
      }
    }

This provides an override for the empty Theme interface within Emotion.

https://emotion.sh/docs/typescript#define-a-theme


Related Query

More Query from same tag