[DataGridPro] Documentation on customizing theme

[TheSecMaven]

I am trying to pass in an existing theme to the DataGridPro component, but can't figure out how from the Docs. It seems I need to override the panel components so that when I click to open a panel it still inherits my theme (as of now, clicking to open any filter or columns panel causes the whole app theme to change.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Unable to see how I can pass in a theme to the panels for filter and columns

Expected Behavior 🤔

documentation would be great, and happy to contribute.

Steps to Reproduce 🕹

Steps:

1. provide a custom theme to your app ThemeProvider
2. render DataGridPro
3. Click to view columns or filter panel
4. the whole app's theme will be overwritten

Context 🔦

I am trying to use the datagrid component with the theme I already have.

Your Environment 🌎

`npx @material-ui/envinfo`

``` Chrome SC-MKEFFEL-OSX mkeffele$ npx @material-ui/envinfo npx: installed 2 in 3.75s System: OS: macOS Mojave 10.14.6 Binaries: Node: 14.5.0 - /usr/local/Cellar/node/13.2.0/bin/node Yarn: 1.19.2 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Browsers: Chrome: 92.0.4515.159 Edge: Not Found Firefox: 88.0.1 Safari: 14.1.2 npmPackages: @material-ui/core: ^4.12.0 => 4.12.0 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.58 @material-ui/pickers: 3.2.2 @material-ui/styles: 4.11.4 @material-ui/system: 4.12.1 @material-ui/types: 5.1.0 @material-ui/utils: 4.11.2 @material-ui/x-grid-data-generator: ^4.0.0-alpha.34 => 4.0.0-alpha.34 @types/react: 17.0.11 react: ^17.0.0 => 17.0.2 react-dom: ^17.0.0 => 17.0.2 ```

[TheSecMaven]

screenshots showing the difference attached. no code changes between screenshots, all the styling gets removed.

[TheSecMaven]

I love coding :)

Wrapping the <DataGridPro /> in a <ThemeProvider /> resolved this, but that doesn't seem quite like the right thing because i'm not providing a theme, I just don't want what is going on in the data grid theme to be passed up to the root theme context.

[jb-thery]

Hello, I've the same issue. I created a codesandbox for bug reproduction :

https://codesandbox.io/s/togglecolormode-material-demo-forked-4eiyb?file=/demo.tsx

All theme is overwritten by the datagrid, try to toggle theme for experimenting the issue. it's a very annoying bug :(

[nms2019]

On all my pages with DataGridPro, I lose all formatting with useStyles and makeStyles commands and even the components on the page lose their styling. Pics below:

When Grid is removed from page styling returns. Including buttons (not pictured).

Could be either a documentation issue or a bug. Site is completely upgraded to V5 for MUI (all other Material UI v4 npm packets are uninstalled.

[m4theushw]

@jbty Updating all dependencies in your CodeSandbox to their latest version solved the problem: https://codesandbox.io/s/togglecolormode-material-demo-forked-v2yrv?file=/package.json

---

@mkkeffeler and @nms2019 do you have a reproduction? This codesandbox.io template may be a good starting point.

[oliviertassinari]

I'm closing as we have no reproductions to investigate this bug.