[data grid] Tweak GridRootStyles to allow CSS variables (and joy-ui!)

[adammanderson]

Current behavior 😯

Error:
Uncaught Error: MUI: Unsupported 'var(--joy-palette-neutral-800)' color. The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

Cause:
const borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);

Expected behavior 🤔

MuiDataGrid should support CSS variables.

Steps to reproduce 🕹

1. Set theme.palette.divider as a CSS variable.
2. Watch GridRootStyles explode.
3. Make bug.

Context 🔦

It would be great to get MuiDataGrid working with joy-ui and/or custom css variables.

Your environment 🌎

No response

Order ID 💳 (optional)

No response

[adammanderson]

Anyone wanting to use DataGrid inside a @mui/joy project, a workaround could be to use a nested theme. Make sure to set up material in your joy project first: https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/#case-b-material-ui-in-a-joy-ui-project. Then:

import { CssVarsProvider } from '@mui/joy';
import { ThemeProvider } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';
import { createTheme } from '@mui/material/styles';

const dataGridTheme = createTheme();

<CssVarsProvider theme={theme}>
  ...
  <ThemeProvider theme={dataGridTheme}>
    <DataGrid ... />
  </ThemeProvider>
  ...
</CssVarsProvider>

[m4theushw]

Thanks for expressing interest in using the DataGrid with Joy. We're aware of this problem and we need to discuss yet how to support it properly.

[0xc00010ff]

Great workaround @adammanderson.
Would love support for this. ✋ Will buy the Pro version when this is implemented.
Thanks for the great components, MUI team.

[cherniavskii]

For the Material UI's CSS Theme Variables - it works with the DataGrid: https://codesandbox.io/s/floral-wind-nok8wk?file=/demo.tsx
The issue is when you use a regular theme and set the palette color to a CSS variable: https://codesandbox.io/s/unruffled-frog-i6ilvi?file=/demo.tsx

[cherniavskii]

We might consider using CSS filters instead of lighten/darken JS functions for color manipulation.

[atillaaliyev]

Hi,
I don't understand result of discuss. Can we use DataGrid and Joy together? I don't see any documents about it.
We will recode all components from Material UI to Joy and we will re-design them. In additional we will renew our premium license and want to use Joy and DataGrid7 together.

[atillaaliyev]

use a regular theme and set the palette color to a CSS varia

Hi,
I tried for this : https://codesandbox.io/p/sandbox/floral-wind-nok8wk?file=%2Fdemo.tsx . When I changed CSS Provider from '@mui/joy' , i get this error.