search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.55k stars 1.33k forks source link

[DataGrid] Demo containers #13981

Open zanivan opened 4 months ago

zanivan commented 4 months ago

Related page

https://mui.com/x/react-data-grid/

Kind of issue

Broken demo

Issue description

Almost all DataGrid demos have their top corners cropped—likely due to the demo container border-radius being larger than DataGrid's.

Screenshot 2024-07-25 at 10 06 12 Screenshot 2024-07-25 at 10 06 15

I think the demos are using the "bg": "inline" variant for demo container, and in addition to the cropped corners, we also have these two borders that feels off:

Screenshot 2024-07-25 at 10 06 21

Suggestion

Instead of using the "bg": "inline" variant, start using the "bg": "outlined" (this one), with a padding from the DataGrid and demo container

Search keywords: demo datagrid container border

zanivan commented 4 months ago

About the corners, I realized it's not related to the demo container—it's actually the component. Adding overflow: 'clip' to DataGrid fixes it.