Support CSS theme variables in DataGrid and DatePickers

[siriwatknp]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Migrating the https://mui.com/x/ to use CSS theme variables (mui/material-ui#34922) is blocked by the MUI X components (data grid and date pickers) because they are not yet supporting the feature.

Examples 🌈

diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
index 77146b23..2735cd2b 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -39,7 +39,9 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
+    : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
 }));
 
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(

Motivation 🔦

@mui/material has landed an experimental API for supporting CSS theme variables which is a new feature without breaking changes.

There are some part of the code in MUI X (data grid and date pickers) that uses theme.palette.* so the updates can be done the same as mui/material-ui#32049.

Order ID 💳 (optional)

No response