Material-UI 5 DataGrid styles are not isolated between components

Question

I've just upgraded from Material-UI v4 to v5 (now MUI). If I have a DataGrid component and a component like a Select component (a MenuItem has issues too), the Select component will not work properly. Some additional styles loaded by the DataGrid interfere with it.

The example I'll show here is that values no longer dropdown, but are instead listed horizontally all smashed together. Note that the DataGrid is intentionally empty for this demo.

As opposed to the expected functionality like this:

I've put the code on CodeSandbox

Notice that "@mui/x-data-grid": "^4.0.0" has a dependency on "@material-ui/core": "^4.12.3". I was/am uncomfortable with that, but it does have it listed as a dependency (unless I missed something somewhere).

Is there something I'm missing, or is there a bug in the newest version of DataGrid I'm using? BTW, all of the the DataGrid functionality in my actual application works fine.

For completeness, I'll also include the code here:

import React from "react";
import { render } from "react-dom";

import { DataGrid } from "@mui/x-data-grid";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

function App() {
  return (
    <div>
      <Select>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
      {/* with DataGrid, Select will shown options on one line */}
      {/* comment out DataGrid and the select will work */}
      <DataGrid rows={[]} columns={[]} /> 
    </div>
  );
}
render(<App />, document.querySelector("#root"));

The package.json file is:

{
  "name": "mui-datagrid-isolation-issue",
  "version": "5.0.0",
  "description": "",
  "keywords": [],
  "main": "index.js",
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "^5.0.1",
    "@mui/styles": "^5.0.1",
    "@mui/x-data-grid": "^4.0.0",
    "@material-ui/core": "^4.12.3",
    "react": "latest",
    "react-dom": "latest"
  }
}

Answer 1

You're using v4 @mui/x-data-grid which uses JSS while the MUI components are in v5 which uses emotion. The JSS styles from the old version overrides the emotion styles leading to unexpected result.

To fix it, install the next version (v5) of @mui/x-data-grid so it can be compatible with MUI v5, and also remove @material-ui/core v4 in your package.json.

npm install @mui/x-data-grid@next

You can always look at the package.json file in the docs demo to see what a working project look like.

Answer 2

Thanks for your answer @NearHuscarl. I don't have the reputation to comment. It took me a while to figure this out as the docs at MUI Data Grid Component demo page are still pointing to npm install @mui/x-data-grid, which leads to the wrong package being installed for MUI5.