Unable to apply typescript interface correctly.

interface SizeProp {
  xs?: TwStyle
  sm?: TwStyle
  md?: TwStyle
  lg?: TwStyle
  xl?: TwStyle
}

const sizeStyles: SizeProp = {
  xs: tw`h-4 text-xs`,
  sm: tw`h-6 text-sm`,
  md: tw`h-8 text-base`,
  lg: tw`h-10 text-lg`,
  xl: tw`h-12 text-xl`,
}

any work around this? I would like to use twin.macro in a good typescript way. Like trying to apply interface

 ({ size = 'md' }: ButtonProp) => sizeStyles[size], 


Element implicitly has an 'any' type because expression of type 'string | TwStyle' can't be used to index type 'SizeProp'.
  No index signature with a parameter of type 'string' was found on type 'SizeProp'.ts(7053)
Type 'TwStyle' cannot be used as an index type.
Was this page helpful?