Typing component that returns an x.div and that accepts an `as` prop

[sctgraham]

I'm having some trouble getting the following to play nicely with typescript. Specifically, the as prop on BorderedBox throws a typescript error.

const BorderedBox: React.FC<SystemProps> = (props: SystemProps) => (
  <x.div
    position="relative"
    backgroundColor="white"
    borderRadius="3px"
    border={{
      xs: '1px solid transparent',
      sm: '1px solid grey-400',
    }}
    {...props}
  />
)

const MyPage: React.FC = () => (
  <BorderedBox as="aside"></BorderedBox>
)

Typescript gives this error : Property 'as' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; }'

Thanks for any help on setting this up properly.

[sctgraham]

Just to clarify : it works ! The <BorderedBox/> component is indeed rendered as an <aside/> in the browser. But I can't figure out how to get correct Typescript typings.

[indiejoseph]

@sctgraham please check Scaleway UI: https://github.com/scaleway/scaleway-ui/blob/8afa82eb50644b1dfbbec1b2abcd635a947b4a84/src/components/Box/index.tsx#L71