I have created a custom Button Function Component in TypeScript using Material-UI as the base. After styling and adding features, I exported it as my own Button. Now, when I try to use this Button component in conjunction with the Link component from react-router-dom by passing it as a 'component' prop to the button, I am unsure about what type to use in the ButtonProps interface. Also, should the 'to' prop be specified as a string?
component/button.tsx
import * as React from 'react';
import { Button as BaseButton } from '@material-ui/core';
interface ButtonProps {
component: ???;
to: string;
}
export const Button: React.FC<ButtonProps> = ({ component, to }) => (
<BaseButton component={component} to={to} />
)
.
some other place
import { Button } from 'components/button';
import { Link } from 'react-router-dom';
(...)
<Button component={Link} to={'/'} />
(...)