Warning when using a custom component in Button

[eps1lon]

Hi, I am having trouble to type Button with Link from react-router v5, as seen in https://next.material-ui.com/demos/buttons/#third-party-routing-library, maybe some one could add the ts version of this example.

tried:

<Button component={({ ref, ...props }) => <Link to="/about" {...props} ref={ref} />}>
   about
</Button>

No issue in the editor.
but warning from material-ui

 Warning: Failed prop type: Invalid prop `component` supplied to `ButtonBase`. Expected an element type that can hold a ref.

followed by warning from react

Warning: component: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

using typescrupt:3.3.4000, react:latest, material-ui: next(latest)

Originally posted by @stunaz in #14897 (comment)

[eps1lon]

Warning: Failed prop type: Invalid prop component supplied to ButtonBase. Expected an element type that can hold a ref.

Is this the full error message? There should be link to https://next.material-ui.com/guides/composition/#caveat-with-refs which explains the issue.

To be specific you forgot to include the part from https://next.material-ui.com/demos/buttons/#third-party-routing-library about React.forwardRef

[stunaz]

Thanks for paying attention to this issue. I will try and provide a sandbox. I was getting more error trying using React.forwardRef

Edit: sandbox ==> open the console to see the warning

[eps1lon]

The first usage is wrong in Material-UI as well as react (without forwardRef).

The second one is a typescript issue only with how the props in forwardRef are typed. Using props: any solves this but isn't desirable.

We need a test case for forwardRef components in component and a fix.

[eps1lon]

@stunaz
This works already today in your codesandbox:

<Button
  component={React.forwardRef<HTMLAnchorElement, Partial<LinkProps>>(
    (props, ref) => (
      <Link to="/about" {...props} ref={ref as any} />
    )
  )}
>
  with React.ForwardRef (followed in mui docs)
</Button>

ref as any is an issue with @types/react-router-dom and should be fixed with DefinitelyTyped/DefinitelyTyped#34464.

[stunaz]

Nice, Thanks a lot!