Nested styled-components ThemeProviders and TypeScript

Question

Recently I started rewriting our app to TypeScript. To make it as customisable as possible, each of our screens has its own ThemeProvider in separate file.

Normally, when you use styled-components you declare module, and add your own types there, but what am I supposed to do when there's many of them and they're nested?

That's how the structure of a component/screen looks like:

index.tsx, index.styled.ts, index.theme.tsx

ThemeProvider is imported from index.theme.tsx, and then used in index.tsx.

index.styled.ts contains exported styled components.