I am trying to, for scope reasons, add a new set of components to an app that has a new theme. This new theme has a different type signature than the old theme. The old theme is set up using the Typescript docs for styled-components and the components using it import from styled-components, not xstyled.
How can I go about doing this? I tried re-exporting the x and styled export but it looks like the X type still refers to the DefaultTheme type for some reason.
import { system, StyleGenerator, SystemProps } from '@xstyled/system';
import { createCss } from '@xstyled/styled-components';
import * as styledComponents from 'styled-components';
import { ITheme } from './theme'; // new theme type
const module = createCss<StyleGenerator<SystemProps<ITheme>>>(system);
export const css = module.css;
export const styled = module.styled;
export const x = module.x as any;
Essentially, instead of overriding the types using a declaration file I would like to re-export them with the correct theme and create components using that new component.
I am trying to, for scope reasons, add a new set of components to an app that has a new theme. This new theme has a different type signature than the old theme. The old theme is set up using the Typescript docs for styled-components and the components using it import from styled-components, not xstyled.
How can I go about doing this? I tried re-exporting the
xandstyledexport but it looks like the X type still refers to the DefaultTheme type for some reason.Essentially, instead of overriding the types using a declaration file I would like to re-export them with the correct theme and create components using that new component.