TypeScript: How to combine DefaultTheme with styled-components?

Question

I have a module that is made with styled-components and export a theme

I want to combine the exported theme for styled from the module with my application theme.

I have tried the following in theme.ts:

import { theme as idCheckTheme } from '@pass-culture/id-check/src/theme'
import { DefaultTheme } from 'styled-components/native'
import './styled.d'

export const theme: DefaultTheme = {
  ...idCheckTheme,
  appBarHeight: 64,
}

I have also copied the styled.d.ts and added appBarHeight: number at the top.

When I start my application, I have the following error:

Property 'appBarHeight' is missing in type '{ colors: { black: ColorsEnum; error: ColorsEnum; greenValid: ColorsEnum; greyDark: ColorsEnum; greyMedium: ColorsEnum; greyLight: ColorsEnum; ... 4 more ...; primaryDark: ColorsEnum; }; typography: { ...; }; buttons: { ...; }; }' but required in type 'DefaultTheme'.  TS2741

I expected it to work, typing isn't complaining in IntelliJ.

How can I combine a styled-components theme into a new DefaultTheme with TypeScript?

Answer 1

you should be able to extend the DefaultTheme interface, create an interface for your theme, and define it like so:

import { theme as idCheckTheme, ThemeType as IdCheckThemeType } from '@pass-culture/id-check/src/theme'
import { DefaultTheme } from 'styled-components/native'

// a declaration (d.ts) file may work better than declaring this above the interface
declare module 'styled-components' {
  export interface DefaultTheme extends INewTheme {}
}

export interface INewTheme extends IdCheckThemeType{
  appBarHeight: number;
}

export const NewTheme: INewTheme = {
  ...idCheckTheme,
  appBarHeight: 64,
}
 
// pass your theme to your theme provider
<ThemeProvider theme={NewTheme}>
<App/>
</ThemeProvider>

inside your styled components, you should also be able to access the appBarHeight like this:

const StyledBar = styled.div`
  ${({theme}) => theme.appBarHeight};
`