diff --git a/packages/grid/x-data-grid/src/components/GridRowCount.tsx b/packages/grid/x-data-grid/src/components/GridRowCount.tsx
index 650b7b30087eb..2842ee6143396 100644
--- a/packages/grid/x-data-grid/src/components/GridRowCount.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRowCount.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
diff --git a/packages/grid/x-data-grid/src/components/GridScrollArea.tsx b/packages/grid/x-data-grid/src/components/GridScrollArea.tsx
index ce605c6f83537..bc28653d6ada9 100644
--- a/packages/grid/x-data-grid/src/components/GridScrollArea.tsx
+++ b/packages/grid/x-data-grid/src/components/GridScrollArea.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { GridEventListener } from '../models/events';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { GridScrollParams } from '../models/params/gridScrollParams';
diff --git a/packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx b/packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx
index 81f463f34e3ea..c389b75a03b78 100644
--- a/packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx
+++ b/packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
diff --git a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx b/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
index 9df205edd4826..80ec95e10da03 100644
--- a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import {
   unstable_composeClasses as composeClasses,
   unstable_useEnhancedEffect as useEnhancedEffect,
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
index 105fd7c8f3447..4184ab99a6e0a 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
@@ -22,17 +22,15 @@ const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders,
-})<{ ownerState: OwnerState }>(({ theme }) => {
-  return {
-    position: 'relative',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    borderBottom: '1px solid',
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius,
-  };
+})<{ ownerState: OwnerState }>({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)',
 });
 
 interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
index ebea1222ce771..3f87a40002d1f 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -24,12 +24,12 @@ const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderTitle',
   overridesResolver: (props, styles) => styles.columnHeaderTitle,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: theme.typography.fontWeightMedium,
-}));
+  fontWeight: 'var(--unstable_DataGrid-headWeight)',
+});
 
 const ColumnHeaderInnerTitle = React.forwardRef<
   HTMLDivElement,
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx
index edf6af5f26fb7..86b66161563e2 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx
index a40939492da66..1fd807e831ee9 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
diff --git a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx
index 43eb8db0d5abf..d6a7cbe1ea4a5 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
@@ -27,14 +27,12 @@ const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer,
-})<{ ownerState: OwnerState }>(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: 52, // Match TablePagination min height
-    borderTop: '1px solid',
-  };
+})<{ ownerState: OwnerState }>({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid',
 });
 
 const GridFooterContainer = React.forwardRef<HTMLDivElement, GridFooterContainerProps>(
diff --git a/packages/grid/x-data-grid/src/components/containers/GridMainContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridMainContainer.tsx
index cc6fc625c3677..a41544b3a362b 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridMainContainer.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridMainContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
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 b3949b8f92c11..fd7167275ac41 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { SxProps } from '@mui/system';
-import { Theme, alpha, styled } from '@mui/material/styles';
+import { Theme, SxProps, styled } from '@mui/system';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -28,17 +27,15 @@ const GridOverlayRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Overlay',
   overridesResolver: (_, styles) => styles.overlay,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: theme.vars
-    ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
-    : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
-}));
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)',
+});
 
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(
   props: GridOverlayProps,
diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
index 6725db243d26e..87b16bf4654ec 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -95,15 +95,21 @@ export const GridRootStyles = styled('div', {
   ],
 })<{ ownerState: OwnerState }>(({ theme }) => {
   const borderColor = getBorderColor(theme);
+  const radius = theme.shape.borderRadius;
 
   const gridStyle: CSSInterpolation = {
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars
+      ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
+      : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary,
     ...theme.typography.body2,
     outline: 'none',
@@ -432,13 +438,13 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
     },
     [`& .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
 
       [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
diff --git a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx
index acb623e17c817..313b5d1994d57 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx
index 1a9a9fb5dabd8..6541ce3b64d45 100644
--- a/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx
index e8f28d26f2beb..6104beaeb21c6 100644
--- a/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx
index 8dc6105e7c2b6..5c25eeb540f9b 100644
--- a/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
index 28af8982dfb3d..00da9b239deb2 100644
--- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
+++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx
index 45133e4d6de2b..47d3bc2fff0df 100644
--- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx
+++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
index 2c155d8204375..3438eb409e206 100644
--- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
+++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index 7305be7fc1f38..26bc2b1268a0f 100644
--- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/system';
 import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';