According to the Material UI documentation, you can supply either a string or a component to the component
property of a Grid
item.
I would like to change an existing Grid
instance to act as an anchor, but I want to accomplish this using a Link
component instead of supplying 'a'
as the component
property (this is because using 'a'
as the component property forces a full refresh, where I assume using a Link
component does not.)
The problem is that it's not actually documented anywhere how to accomplish using a component with this property instead of a string. I can get it to render as an anchor using the string overload, but not with a component.
I have tried several methods of supplying a component to this property, but the simplest case is something like this:
<Grid component={ Link }>
But it is always highlighted as an error, with "No overload method matches this call" as the error message.
The overload for the component
property is as follows:
component?: string | React.ComponentType<Omit<GridProps, StrippedProps>>;
So my question is, how is this actually meant to be accomplished? It doesn't seem to be as simple as supplying a component type as the documentation suggests, or like you can do with a Button
component.
Edit: here is an example of code that is giving me this error.
const Test: React.FunctionComponent = () => {
return(
<Grid component={ Link }/>
)
}
I forgot to mention that I'm using TypeScript in a mature react/redux codebase. I think this is a TypeScript-specific error, as I'm not seeing it in codesandbox.io. It's not a versioning issue as I've been doing all tests in the same version of Material UI Core (4.1.1).
Error message is as follows:
Overload 1 of 2, '(props: GridProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type 'typeof Link' is not assignable to type 'string | ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any> | FunctionComponent<...> | undefined'.
Type 'typeof Link' is not assignable to type 'ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any>'.
Types of parameters 'props' and 'props' are incompatible.
Property 'to' is missing in type 'Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">' but required in type 'Readonly<LinkProps>'.
Overload 2 of 2, '(props: PropsWithChildren<GridProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type 'typeof Link' is not assignable to type 'string | ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any> | FunctionComponent<...> | undefined'.
Type 'typeof Link' is not assignable to type 'ComponentClass<Pick<GridProps, "color" | "style" | "title" | "children" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 244 more ... | "zeroMinWidth">, any>'.