Material UI Themes having issues applying to elements.

• [ 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 😯

When changing themes, only primary color is applied to a single MUI Component (datagrid). Having a type of “dark” for a theme causes all MUI components to render white, unless selected.

Expected Behavior 🤔

Background and Primary color changes to proper color for whole page, which is different between Dark and Light mode (or palette:{type:}

Steps to Reproduce 🕹

https://codesandbox.io/s/peaceful-shtern-x6nli?file=/src/App.js

Steps:

1. Theme 2 (very bottom button) is default theme/light theme. Menus are highlighted red. Background is not green though.

1. Remember location of Theme 2 button at very bottom.
2. Press Theme 1 button at the very bottom
3. See result. Everything is there and clickable, blue background on the grid, but all text is white(?) and background is not purple
4. Press Theme 2 button, theme changes back to original, background still not green.

Context 🔦

Trying to create a working theme-switching system. This is a proof of concept and figuring out what does what at this stage.

Your Environment 🌎

Browsers: Latest Chrome, Latest firefox. Editor: JetBrains WebStorm (latest)

System: OS: Windows 10 10.0.19042 Binaries: Node: 14.15.1 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 93.0.4577.82 Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.47) npmPackages: @mui/x-data-grid: ^4.0.0 => 4.0.0 @types/react: 17.0.20 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2

</details>

[mnajdova]

I’m building the design library, how should the contained button behave in the dark mode? Without knowing the v4 when it was adapting, my guess is that grey is switching from using grey[300] to something like grey[700]?

@adrianmanea could you open a new issue describing the problem and what you expect. It’s not related to this issue.

[VladParshin]

First, you can use CssBaseline instead of ScopedCssBaseline if you pretend to apply MUI to the whole application. Second, the ScopedCssBaseline must be inside the ThemeProvider to get the correct background color. This should solve the issue.

So I ran into a new problem, which I’m not sure how to solve. It’s still on topic, as the theme applied seems to work correctly, however the override for the DataGrid so I can make the datagrid background white, is not taking place. I updated the above codesandbox to represent the issue.

Theme 1 with blue background, applies blue to everthing, despite me setting an override into the theme.

components: {
    MuiDataGrid: {
      background: {
        default: "#fff"
      }
    }

I have tried using MuiDataGrid and MuiDatagridPro, as well as background, backgroundColour, and paper tags in various combinations. But I’ve had no effects

Also as a side note. How do I apply a different background color, and textcolor, on a selected row? (Only the selected row)