[DataGridPro] Cannot use component from @mui/x-data-grid in a @mui/x-data-grid-pro

[tjgibbs92]

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

Current Behavior 😯

I'm trying to mix the Quick Filter Example with XGrid Multiple column filtering for some of our more needy end users. So I figured that just adding the QuickSearchToolbar from the Quick Filter Example would transfer seamlessly. But XGrid is throwing the error

Material-UI X: Could not find the data grid context.
It looks like you rendered your component outside of a DataGrid or XGrid parent component.

Expected Behavior 🤔

The Quick Filter Example should show with XGrid.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-forked-w2316?file=/demo.js

Above is the broken link but it works perfectly if you change XGrid to DataGrid at line 111.

Context 🔦

I'm attempting to give a user multiple avenues of filtering. They could filter globally or filter by the column.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.62)   
  npmPackages:
    @material-ui/core: ^4.12.1 => 4.12.1 
    @material-ui/data-grid: ^4.0.0-alpha.34 => 4.0.0-alpha.34 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60
    @material-ui/styles:  4.11.4
    @material-ui/system: ^4.11.3 => 4.12.1
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @material-ui/x-grid: ^4.0.0-alpha.34 => 4.0.0-alpha.34
    @material-ui/x-license:  4.0.0-alpha.34
    @types/react:  17.0.14
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.1 => 17.0.2

Order id 💳

#27386

[cbussick]

You are importing components from @material-ui/data-grid (line 5):

import {
  DataGrid,
  escapeRegExp,
  GridToolbarDensitySelector,
  GridToolbarFilterButton
} from "@material-ui/data-grid";

and then use these in the <XGrid> component.

You can change the import to come from @material-ui/x-grid, which fixes the error:

import {
  DataGrid,
  escapeRegExp,
  GridToolbarDensitySelector,
  GridToolbarFilterButton
} from "@material-ui/x-grid";

To have the context it seems necessary to only use components from the same package.

I did the same thing and ended up with the same error a few days ago 😁

[oliviertassinari]

Interesting, this issue makes the case for #924 (comment)