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.13k stars 1.28k forks source link

Material UI v5 DataGrid breaking Drawer CSS. #2688

Closed gkbaby closed 3 years ago

gkbaby commented 3 years ago

Duplicates

Latest version

Current behavior 😯

Mini Drawer sample code : https://mui.com/components/drawers/#MiniDrawer.js DataGrid: https://mui.com/components/data-grid/#DataGridDemo.js I've combined both these code and while adding the datagrid code breaks the normal working of minidrawer. Please see the code https://codesandbox.io/s/upbeat-williamson-nqu48?file=/src/Drawer.js comment line no 153 to see how it looks normally. This used to work normally before upgrading to muiv5

Expected behavior 🤔

The mini drawer's appearance should not be affected by datagrid.

Steps to reproduce 🕹

Steps: https://codesandbox.io/s/upbeat-williamson-nqu48?file=/src/Drawer.js

  1. Please uncomment line 153 and reload the output tab to see how drawer looks normally.

Context 🔦

muiv5 upgrade caused this trouble

Your environment 🌎

`npx @mui/envinfo` ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Order ID 💳 (optional)

No response

gkbaby commented 3 years ago

updating to a mui datagrid pre-release branch which used v5 mui fixed this issue. so closing this issue.

3210jr commented 3 years ago

This worked for me with the latest release.

Here is where to find it for reference: https://github.com/mui-org/material-ui-x/releases