Typescript error for Material-ui's CardActionArea component property

Question

The Material-ui Buttons | Third party routing library documentation states that we need to make an adaptor do encapsulate a react-router-dom/Link component into a Button. But doing the same with a CardActionArea (which is a BaseButton, according to the docs) gives the following Typescript error:

main.tsx:24:10 - error TS2322: Type '{ children: Element; component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; to: string; }' is not assignable to type 'IntrinsicAttributes & CardActionAreaProps & { children?: ReactNode; }'.
  Property 'component' does not exist on type 'IntrinsicAttributes & CardActionAreaProps & { children?: ReactNode; }'.

14         <CardActionArea component={AdapterLink} to="/foo">
            ~~~~~~~~~~~~~~

The code works nonetheless. Here is a minimal example showing the error message on line 14:

Note: there is an error on line 6 because Codesandbox is running eslint in a TypeScript file, so just ignore that.

https://codesandbox.io/s/heuristic-bash-w17bu

Answer 1

这对我有用，我在TypeScript中没有错误：

<CardActionArea {...{ component: Link, to }}>