Tengo un módulo que está hecho con styled-components y exporto un tema .
Quiero combinar el tema exportado para el estilo del módulo con el tema de mi aplicación.
He intentado lo siguiente en 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, } También copié el styled.d.ts y agregué appBarHeight: number en la parte superior.
Cuando inicio mi aplicación, tengo el siguiente 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'. TS2741Esperaba que funcionara, escribir no se queja en IntelliJ.
¿Cómo puedo combinar un tema styled-components en un nuevo tema DefaultTheme con TypeScript?
debería poder ampliar la interfaz DefaultTheme, crear una interfaz para su tema y definirla así:
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>dentro de sus componentes con estilo, también debería poder acceder a appBarHeight de esta manera:
const StyledBar = styled.div` ${({theme}) => theme.appBarHeight}; `