Emotion 11 get access to theme object with typescript and react

Currently I have the following structure:

src/styles/theme.ts

const theme = {
  fonts: {
    body: 'Lato, sans-serif',
  },
  colors: {
    primary: '#3D63AE',
  },
};

// export type ThemeProps = {
//   theme: Theme;
// };

export default theme;

In src/types/emotion.d.ts:

import '@emotion/react';

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

To type my theme I can do:

import { Theme } from '@emotion/react';

const theme: Theme = {
 // ...

1) Is this the preferred and cleanest way?

Also in e.g. my Header component styles file src/components/Header/Header.styles.ts I want to get access to my theme object.

I see people doing:

export type ThemeProps = {
 theme: Theme;
};

So in Header.styles.ts I can do:

import { ThemeProps } from ???;

export default ({ theme }: ThemeProps) => ({
  root: css`
    margin-top: ${theme.spaces.large};
  `,

2) But where do I have to declare this type?

And is above setup the recommended way?

Update:

I created a global declaration file src/types/global.d.ts, and added:

import { Theme } from '@emotion/react';

declare global {
  interface ThemeProps {
    theme: Theme;
  }
}

Now in Header.styles.ts I am able to use:

export default ({ theme }: ThemeProps) => ({
  root: css`
    margin-top: ${theme.spaces.large};
  `,