TS Error using `variant` prop: No overload matches this call

[jonsherrard]

Hi there!

I'm coming from theme-ui and trying to use the variant system in dripsy but getting the following syntax error:

Theme:

text: {
    cardHeading: {
      fontWeight: 'bold',
      fontSize: '$5',
    },
}

Error:

No overload matches this call.
  Overload 1 of 2, '(props: StyledProps<"text"> & ((TextProps & RefAttributes<Component<TextProps, any, any>>) | (TextProps & { ...; })), context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 2 of 2, '(props: PropsWithChildren<StyledProps<"text"> & ((TextProps & RefAttributes<Component<TextProps, any, any>>) | (TextProps & { ...; }))>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.ts(2769)
[types.d.ts(85, 5): ]()The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & (StyledProps<"text"> & ((TextProps & RefAttributes<Component<TextProps, any, any>>) | (TextProps & { ...; })))'
[types.d.ts(85, 5): ]()The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<StyledProps<"text"> & ((TextProps & RefAttributes<Component<TextProps, any, any>>) | (TextProps & { ...; }))>'

[nandorojo]

did you follow the typescript guide?

[jonsherrard]

Ah. Double checked

If anyone else has this error - I had called my theme object appTheme and not modified the example type in this guide to match: https://www.dripsy.xyz/typescript/setup

Thank you @nandorojo!