How does one use the component prop with custom components?

Viewed 44

I am trying to use the Link component (from react-router) with my customized button component. I'm not sure what I'm doing wrong:

<Button component={Link} to="/">
"This works"
</Button>

<CustomButton component={Link} to="/">
"And this doesn't"
</CustomButton>

CustomButton is a simple withStyles - component:

const CustomButton = withStyles((theme: Theme) => ({
    root: {
        marginLeft: '0.5rem'
        /* ...etc ... */
    },
}))((props: ButtonProps) => <Button color="default" {...props} variant="contained" />);

export default CustomButton;

I'm getting a type error:

Property 'component' does not exist on type 'IntrinsicAttributes & Pick, "button">, "children" | "ref" | "form" | "slot" | ...

Sandbox: https://codesandbox.io/s/fervent-borg-bqize

It does work per se, but the type error from the linter doesn't let me compile it (without suppressing the linter)

1 Answers

Try

const CustomButton = withStyles({
  root: {
    marginLeft: '0.5rem'
  }
})(Button);
Related