Typescript error for Material-ui's CardActionArea component property

1
votes

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

1
reactjstypescriptmaterial-uireact-router-dom

1 Answers

2
votes

This works for me and I do not have errors in TypeScript:

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