[data grid] Page fails to load DataGrid with Joy UI

[punit1108]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

I added DataGrid to my code and tried populating the columns and rows

import { DataGrid, GridColDef } from '@mui/x-data-grid';
import './SystemDataViewer.css'

function SystemDataViewer(props: any) {
  const columns: GridColDef[] = [
    { field: 'sys_serial_no', headerName: 'Serial', width: 70 },
    { field: 'hostname', headerName: 'Hostname', width: 70 },
    { field: 'platform_type', headerName: 'Platform', width: 70 },
  ]

  const docs = [
    { id: 1, sys_serial_no: '123', hostname: 'test', platform_type: 'test' },
  ]

  return (
    <div className="system-data-viewer" style={{ height: 400, width: '100%' }}>
        <DataGrid columns={columns} rows={docs}/>
    </div>
  )
}

export default SystemDataViewer;

Current behavior 😯

Page fails to load and gives the below error -

Expected behavior 🤔

Should render the table.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` I am using Edge Chromium for testing. System: OS: macOS 13.1 Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: Not Found npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Chrome: 109.0.5414.87 Edge: Not Found Firefox: 109.0 Safari: 16.2 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.113 @mui/core-downloads-tracker: 5.11.4 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/joy: ^5.0.0-alpha.62 => 5.0.0-alpha.62 @mui/material: ^5.11.4 => 5.11.4 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.4 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: ^5.17.20 => 5.17.20 @types/react: ^18.0.26 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.4 => 4.9.4 ```

[cherniavskii]

Hey @punit1108 Could you provide a minimal reproduction example? Thanks!

[punit1108]

@cherniavskii The error doesnt seem to be reproducible in other system/Online IDEs

[punit1108]

Having done some debugging, it is unable to find, theme.shape.borderRadius on line number 121. The filename is GridRootStyles.js.

Not sure if that helps. Put this here anyways.

Update -

https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts#L103

This is where the code is breaking, mind that a lot of other properties are defined.

Also -

The above component SystemDataViewer is nested inside PageContent

<div className="App">
      <CssVarsProvider>
          <Navbar />
          <Token/>  
          <PageContent></PageContent>
      </CssVarsProvider>
</div>

[cherniavskii]

The error doesnt seem to be reproducible in other system/Online IDEs

Can you create a public repo that I can use to reproduce the error?

Do you use a custom theme maybe?

[punit1108]

There you go

https://github.com/punit1108/mui-react-test

I plan to use default theme only

[cherniavskii]

Thanks @punit1108 I've created this minimal example: https://codesandbox.io/s/infallible-spence-qs9yqj?file=/demo.tsx It seems like the issue is caused by an incompatibility between the Joy UI CSS vars theme and MUI X DataGrid.

[cherniavskii]

To fix it, you should wrap the grid into CssVarsProvider from @mui/material:

import { Experimental_CssVarsProvider as MUICssVarsProvider } from '@mui/material/styles';

// ...

<MUICssVarsProvider>
  // The grid goes here
</MUICssVarsProvider>

Here is a working demo: https://codesandbox.io/s/nifty-volhard-4q02x7?file=/demo.tsx

[punit1108]

Ohh, i get it. But, somehow it doesnt make sense for @mui/joy to not be compatible with DataGrid.

Is there a plan to get the incompatibility fixed in near future, or using it this way is the only solution? In case its a bug, can an update be provided with incompatible components fixed?

[cherniavskii]

For now, DataGrid uses the Material UI components by default, so it's only compatible with the Material UI theme.

We plan to work on DataGrid + Joy UI integration that would allow choosing between Joy UI and Material UI libraries and corresponding themes will be supported depending on the chosen library.

We have to cover this incompatibility in the docs and warn users if the Joy UI theme is detected.

[cherniavskii]

I found this guide in Joy UI docs: https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ It applies to the MUI X components as well (since they use Material UI components and theme), so we can link to it.