[material-ui][docs] Confusion about custom component in Grid demos

[jlimsy]

Related page

https://mui.com/material-ui/react-grid/

Kind of issue

[Added by Sam: When looking at the Grid demos that use the styled() utility to define custom components, it's not immediately clear that those are not actually built-in Material UI components.]

Issue description

Your page is for Paper, but the demo code is for Box and Item. Item does not seem to work in Vite or is Item deprecated?

With

import { Grid, Item } from "@mui/material";
...
    <Grid container spacing={2}>
 <Grid item xs={3}>
        <Item>Work</Item>
    </Grid> 
...
</Grid>

I get the following error message:
The requested module '/node_modules/.vite/deps/@mui_material.js?v=b5e471c3' does not provide an export named 'Item'

Not import Item doesn't work either.

Context

I am trying to create a series of boxes in a grid for a calendar as an assignment, but Item does not work. Trying out Paper instead but them page does not explain how to increase the height of each Paper.

Search keywords: Item

[samuelsycamore]

Hey @jlimsy 👋 — as noted on the Paper doc, you're better off using Box, Stack, or another layout component rather than Paper, unless you specifically need Material Design's elevations (and if you're unsure what that is, then you probably don't need it). The Paper component's height can be adjusted with CSS, using any flavor you prefer. 😁

EDIT: sorry, I misread the post. Item is not a Material UI component. I believe you're getting it from this demo: https://mui.com/material-ui/react-grid/#basic-grid - which uses the styled() utility to create a custom component called Item that uses Paper as its basis. So when you try to import Item from the Material UI package, it doesn't work, because that component doesn't exist. Does that make sense?