add unstable_ prefix to CSS variables

mui · Mar 2, 2023 · 9a1af1a · 9a1af1a
1 parent 805aef3
commit 9a1af1a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
@@ -29,8 +29,8 @@ const GridColumnHeadersRoot = styled('div', {
   alignItems: 'center',
   boxSizing: 'border-box',
   borderBottom: '1px solid',
-  borderTopLeftRadius: 'var(--DataGrid-radius)',
-  borderTopRightRadius: 'var(--DataGrid-radius)',
+  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
@@ -28,7 +28,7 @@ const GridColumnHeaderTitleRoot = styled('div', {
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: 'var(--DataGrid-headWeight)',
+  fontWeight: 'var(--unstable_DataGrid-headWeight)',
 });
 
 const ColumnHeaderInnerTitle = React.forwardRef<

diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -34,7 +34,7 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--DataGrid-overlayBackground)',
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)',
 });
 
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -98,9 +98,9 @@ export const GridRootStyles = styled('div', {
   const radius = theme.shape.borderRadius;
 
   const gridStyle: CSSInterpolation = {
-    '--DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
-    '--DataGrid-headWeight': theme.typography.fontWeightMedium,
-    '--DataGrid-overlayBackground': theme.vars
+    '--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,
@@ -109,7 +109,7 @@ export const GridRootStyles = styled('div', {
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor,
-    borderRadius: 'var(--DataGrid-radius)',
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary,
     ...theme.typography.body2,
     outline: 'none',
@@ -438,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: 'var(--DataGrid-radius)',
+      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: 'var(--DataGrid-radius)',
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
 
       [`& .${gridClasses.rowReorderCellPlaceholder}`]: {