Overriding the default theme types in Emotion 11

emotion.d.ts

// this goes in you root types directory, filename is the [name-of-your-module].d.ts
import '@emotion/react';
import { MyCustomTheme } from './theme';

declare module '@emotion/react' {
  export interface Theme extends MyCustomTheme {}
}

theme.ts

export type ThemeColorScheme = {
  primary: string;
  background: {
    body: string;
  };
  text: {
    body: string;
  };
};

export type MyCustomTheme = {
  colors: ThemeColorScheme;
}