title: Material-UI 5 DataGrid styles are not isolated between components
body: <p>I've just upgraded from Material-UI v4 to v5 (now MUI).
  If I have a <code>DataGrid</code> component and a component like a <code>Select</code> component (a <code>MenuItem</code> has issues too), the <code>Select</code> component will not work properly. Some additional styles loaded by the <code>DataGrid</code> interfere with it.</p>
  <p>The example I'll show here is that values no longer dropdown, but are instead listed horizontally all smashed together. Note that the <code>DataGrid</code> is intentionally empty for this demo.</p>
  <p><a href="https://i.stack.imgur.com/z5Aqp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z5Aqp.png" alt="Select dropdown not working when DataGrid exists" /></a></p>
  <p>As opposed to the expected functionality like this:</p>
  <p><a href="https://i.stack.imgur.com/zoltw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zoltw.png" alt="Select dropdown working as expected" /></a></p>
  <p>I've put the code on <a href="https://codesandbox.io/s/mui-datagrid-isolation-issue-xxol4" rel="noreferrer">CodeSandbox</a></p>
  <p>Notice that <code>&quot;@mui/x-data-grid&quot;: &quot;^4.0.0&quot;</code> has a dependency on <code>&quot;@material-ui/core&quot;: &quot;^4.12.3&quot;</code>. I was/am uncomfortable with that, but it does have it listed as a dependency (unless I missed something somewhere).</p>
  <p>Is there something I'm missing, or is there a bug in the newest version of <code>DataGrid</code> I'm using? BTW, all of the the <code>DataGrid</code> functionality in my actual application works fine.</p>
  <p>For completeness, I'll also include the code here:</p>
  <pre><code>import React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  
  import { DataGrid } from &quot;@mui/x-data-grid&quot;;
  import Select from &quot;@mui/material/Select&quot;;
  import MenuItem from &quot;@mui/material/MenuItem&quot;;
  
  function App() {
    return (
      &lt;div&gt;
        &lt;Select&gt;
          &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
          &lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
          &lt;MenuItem value={30}&gt;Thirty&lt;/MenuItem&gt;
        &lt;/Select&gt;
        {/* with DataGrid, Select will shown options on one line */}
        {/* comment out DataGrid and the select will work */}
        &lt;DataGrid rows={[]} columns={[]} /&gt; 
      &lt;/div&gt;
    );
  }
  render(&lt;App /&gt;, document.querySelector(&quot;#root&quot;));
  </code></pre>
  <p>The package.json file is:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;mui-datagrid-isolation-issue&quot;,
    &quot;version&quot;: &quot;5.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;keywords&quot;: [],
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;latest&quot;,
      &quot;@emotion/styled&quot;: &quot;latest&quot;,
      &quot;@mui/material&quot;: &quot;^5.0.1&quot;,
      &quot;@mui/styles&quot;: &quot;^5.0.1&quot;,
      &quot;@mui/x-data-grid&quot;: &quot;^4.0.0&quot;,
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;react&quot;: &quot;latest&quot;,
      &quot;react-dom&quot;: &quot;latest&quot;
    }
  }
  </code></pre>