CODEWITHSUNDEEP
javascriptreactjstypescriptstyled-componentstsx
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14385

TypeScript: How to combine DefaultTheme with styled-components?

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?

Upvotes: 4

Views: 2924

Answers (2)

JESii
JESii

Reputation: 4967

FWIW, I had the same problem when I was upgrading a NextJS file to V12. I kept having that problem and finally figured out what was causing it.

My tsconfig.json file had a value "incremental": true. When I looked it up, I saw that it saves previous compilation files and then "incrementally" builds your executable using those saved files as a starting point. As soon as I removed that option, my build and tests worked perfectly.

I'm guessing there were some old compilation files that Typescript didn't know to throw away and that was causing the problem?

Crasy, but it sure solved my issue.

Upvotes: 0

Jamie Guerrero
Jamie Guerrero

Reputation: 66

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};
`

Upvotes: 5

Related Questions