0

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>'.
pidgezero
  • 153
  • 7
  • Could please attach minimum code to reproduce the issue? Because it's worked for me. – Alex Jan 22 '20 at 00:29
  • @Alex added a code example and some more detail – pidgezero Jan 22 '20 at 04:05
  • can you try passing the `component` as `}/>` – Sumanth Madishetty Jan 22 '20 at 04:16
  • Before `const Test......`, import section, please – Alex Jan 22 '20 at 04:16
  • The import section is very long as there are other things happening in this tsx file, but Link and Grid are both being imported from @material-ui/core. For the sake of simplicity this export is defined outside of any other component. – pidgezero Jan 22 '20 at 04:19
  • @sumanthmadishetty Thank you for the suggestion, but it gave the same error message (basically) as the one I just added to my OP. Difference being it's now stating type 'Element' is not assignable. – pidgezero Jan 22 '20 at 04:21
  • Hmm, the error seems to go away if I define it as { Link as any } instead of just { Link }. I guess it's something like a strictness issue. Further problem is I can't assign a href attribute to the element either, whereas in a normal basic react sandbox this is perfectly fine to do. – pidgezero Jan 22 '20 at 04:27

0 Answers0