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,
}));