I am using the Grid component from the Material-UI (MUI) library in a React project with TypeScript and I'm encountering a type error. When trying to specify the item and component="div" properties for a Grid element, TypeScript throws the following error:

TS2769: No overload matches this call. Overload 1 of 2, '(props: { component: "div"; } & GridBaseProps & { sx?: SxProps | undefined; } & SystemProps & Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, StandardSystemKeys | ... 1 more ... | keyof GridBaseProps>): Element | null', gave the following error. Property 'item' does not exist on type 'IntrinsicAttributes & { component: "div"; } & GridBaseProps & { sx?: SxProps | undefined; } & SystemProps & Omit<...>'.

Code causing the error:

<Grid item xs={6} md={7} component="div">
  <Typography variant="caption" color="text.secondary">
    Name
  </Typography>
</Grid>

Additional information:

• MUI version: @mui/material@latest
• React versions: tested with both 18.x and 19.x
• TypeScript versions: tested with 4.x and 5.x, including 5.8.2
• The error persists with both the latest versions and versions compatible with react-scripts.

I have tried:

• Removing the component="div" property, but this does not resolve the issue.
• Updating dependencies (npm install @mui/material @emotion/react @emotion/styled), but the error remains.
• Testing the project with various versions of TypeScript and React, but the result does not change.

How can I correctly use Grid with item and component="div" without encountering a type conflict? Or how can I work around this issue?

I am using the Grid component from the Material-UI (MUI) library in a React project with TypeScript and I'm encountering a type error. When trying to specify the item and component="div" properties for a Grid element, TypeScript throws the following error:

TS2769: No overload matches this call. Overload 1 of 2, '(props: { component: "div"; } & GridBaseProps & { sx?: SxProps | undefined; } & SystemProps & Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, StandardSystemKeys | ... 1 more ... | keyof GridBaseProps>): Element | null', gave the following error. Property 'item' does not exist on type 'IntrinsicAttributes & { component: "div"; } & GridBaseProps & { sx?: SxProps | undefined; } & SystemProps & Omit<...>'.

Code causing the error:

<Grid item xs={6} md={7} component="div">
  <Typography variant="caption" color="text.secondary">
    Name
  </Typography>
</Grid>

Additional information:

• MUI version: @mui/material@latest
• React versions: tested with both 18.x and 19.x
• TypeScript versions: tested with 4.x and 5.x, including 5.8.2
• The error persists with both the latest versions and versions compatible with react-scripts.

I have tried:

• Removing the component="div" property, but this does not resolve the issue.
• Updating dependencies (npm install @mui/material @emotion/react @emotion/styled), but the error remains.
• Testing the project with various versions of TypeScript and React, but the result does not change.

How can I correctly use Grid with item and component="div" without encountering a type conflict? Or how can I work around this issue?

• reactjs
• typescript
• npm
• material-ui
• grid-layout

• In case you missed it or haven't taken the full tour yet (your earn a badge, BTW), there are 100% completely optional actions one can take after someone answers that helps rate and curate content on the site. – Drew Reese Commented 4 hours ago

1 Answer 1

When switching to a new major version of a dependency it is always a good idea to refer to any change logs and migration guides to make yourself aware of breaking changes. The "Grid" API you are trying to use is the old MUI v6 Grid component API.

See MUI v7 Upgrade Migration, specifically the Grid and Grid2 renamed section, for full details, but the gist is that:

The deprecated Grid component has been renamed to GridLegacy. The Grid2 component has been moved to the Grid namespace.

So to continue using the same old "Grid" you should import and use the now-renamed GridLegacy component.

Example:

import {
  GridLegacy,
  Typography,
} from "@mui/material";

You could even rename/alias it back to Grid so you don't need to update your code.

import {
  GridLegacy as Grid,
  Typography,
} from "@mui/material";

There's also a guide to upgrade to the v2 Grid if you are looking to use the newer grid component and API. Note that now:

All grids are considered items without specifying the item prop.

Here's the MUI v7 version of your code

import {
  Grid,
  Typography,
} from "@mui/material";

...

<Grid size={{ xs: 6, md: 7 }} component="div">
  <Typography variant="caption" color="text.secondary">
    Name
  </Typography>
</Grid>