MaterialUI Button HOC with component prop

Question

I am trying to implement a HOC for MaterialUI Button component:

import {Button as MUIButton, ButtonProps} from '@material-ui/core';
import * as React from 'react';

export const Button = (props: ButtonProps) => <MUIButton {...props} />;

and i use it like this:

import {Button} from '../hocs/button.tsx';
import {Link} from 'react-router-dom';

...

<Button
  variant='contained'
  color='primary'
  component={Link}
  to={`${url}/new`}
>
  Add something
</Button>

But i meet an error

Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: { root?: string | undefined; label?: string | undefined; text?: string | undefined; textPrimary?: string | undefined; ... 24 more ...; iconSizeLarge?: string | undefined; } | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Pick<......'. TS2322

So, what i am doing wrong and how i can fix it?

Thanks ahead.

Edit: I guess, the problem is ButtonProps is a generic, dependant on props.component type.

You don't have to separate children from props, if you just spread props, it's all gonna work. Children are a prop just like any other. — John Smith

Mike Polo Mike Polo · Accepted Answer · 2020-11-19T09:56:36

Solution found. Main point is to duplicate default extending interface.

https://github.com/mui-org/material-ui/issues/19461#issuecomment-581523926

MaterialUI Button HOC with component prop

1 Answers