Property 'component' does not exist on type... Grid?

[gavmor]

When emulating this line of the provided template, TypeScript complains:

src/UI.tsx:30:9 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: OverridableComponent<PaperTypeMap<{}, "div">>; } & SystemProps<Theme> & { children?: ReactNode; ... 15 more ...; zeroMinWidth?: boolean; } & CommonProps & Omit<...>): Element', gave the following error.
    Type '{ children: never[]; item: true; xs: 12; sm: 8; md: 5; component: OverridableComponent<PaperTypeMap<{}, "div">>; elevation: number; square: true; }' is not assignable to type 'IntrinsicAttributes & { component: OverridableComponent<PaperTypeMap<{}, "div">>; } & SystemProps<Theme> & { ...; } & CommonProps & Omit<...>'.
      Property 'elevation' does not exist on type 'IntrinsicAttributes & { component: OverridableComponent<PaperTypeMap<{}, "div">>; } & SystemProps<Theme> & { ...; } & CommonProps & Omit<...>'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
    Type '{ children: never[]; item: true; xs: 12; sm: 8; md: 5; component: OverridableComponent<PaperTypeMap<{}, "div">>; elevation: number; square: true; }' is not assignable to type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses>; ... 14 more ...; zeroMinWidth?: boolean; } & CommonProps & Omit<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses>; ... 14 more ...; zeroMinWidth?: boolean; } & CommonProps & Omit<...>'.

30         <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

According to the "with Typescript" composition coveat,:

If you encounter a component that rejects its component props in TypeScript, please open an issue. There is an ongoing effort to fix this by making component props generic.

I hope this helps.

[gavmor]

I am struggling to follow the thread of possibly related issues #15827, #21210, and #17579, although I have tested that dropping:

      component?: React.ReactNode;
      elevation?: Number;
      square?: boolean;

...into Grid.d.ts does the trick (though it's obviously not the change to make).

[FayP]

I'm also seeing the same issue with TablePagination v4.xx however it looks like the same type Omit that I suspect is the issue, is carried over to v5

I'm just adding ts-expect-error to get past this for now.

[omarjcamo]

Following...
Experiencing the same with a styled Grid and the component prop.

[aimad-majdou]

In my case I fixed this by adding the prop component to the styled component:

const AutocompleteGroupLabelStyled = styled(ListSubheader, {
  name: 'AutocompleteMultiple',
  slot: 'GroupLabel',
  overridesResolver: (props, styles) => styles.groupLabel,
})<{ component: React.ElementType }>(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  top: -8,
}));

[gunslingor]

Might want to reopen, I think I see the problem that still exists. It seems it is only designed to be used with a styled component. Without that wrapper magic IDE gives errors:

[DiegoAndai]

@siriwatknp may I ask you to take a look when you have some time?

[krishnagopinath]

I encountered this error when I was bumping TS from 5.4 to 5.5 along with MUI 7. Something in here is causing this. As a temporary solution, folks who encounter this bug could lock themselves to [email protected].

[rlancer]

Should this be reopened?

[bhavey-munjal]

Might want to reopen, I think I see the problem that still exists. It seems it is only designed to be used with a styled component. Without that wrapper magic IDE gives errors:

Do we have any update for this I am also encountering the same error?

[siriwatknp]

@bhavey-munjal please share the code (especially jsx) that renders the Grid.

[siriwatknp]

Based on @gunslingor snippet, I think you are using <Grid item> which is not correct.

In v7, the Grid has changed, please take a look at https://mui.com/material-ui/migration/upgrade-to-v7/#grid-and-grid2-renamed

For some context, the Grid was reworked in v6 and released as Grid2 in parallel with the original Grid component to fix many issues. Now, in v7, the changes are:

• Grid2 becomes the default Grid
• previous Grid becomes GridLegacy

For full information, please take a look at https://mui.com/material-ui/migration/upgrade-to-grid-v2/