From 164a80a32d1cc2ae600c326deadd88162f3bad18 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 6 Dec 2023 17:35:52 +0100
Subject: [PATCH] [DataGrid] Fix cell slot style override (#11215)

Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
---
 .../src/components/cell/GridCell.tsx          |  9 ++++-
 .../src/tests/components.DataGrid.test.tsx    | 37 ++++++++++++-------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
index d55e0c431ca14..81e08c0a6cd12 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -262,6 +262,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
     isSelected,
     rowId,
     tabIndex,
+    style: styleProp,
     value,
     width,
     className,
@@ -348,9 +349,10 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
       maxWidth: width,
       minHeight: height,
       maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto"
+      ...styleProp,
     };
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
 
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
@@ -544,6 +546,7 @@ const GridCellV7 = React.forwardRef<HTMLDivElement, GridCellV7Props>((props, ref
     onKeyUp,
     onDragEnter,
     onDragOver,
+    style: styleProp,
     ...other
   } = props;
 
@@ -678,6 +681,7 @@ const GridCellV7 = React.forwardRef<HTMLDivElement, GridCellV7Props>((props, ref
         opacity: 0,
         width: 0,
         border: 0,
+        ...styleProp,
       };
     }
     const cellStyle = {
@@ -685,9 +689,10 @@ const GridCellV7 = React.forwardRef<HTMLDivElement, GridCellV7Props>((props, ref
       maxWidth: width,
       minHeight: height,
       maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto"
+      ...styleProp,
     };
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
 
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
diff --git a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
index ca568342eb2d2..6c5a7a1db9a2a 100644
--- a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createRenderer, ErrorBoundary, fireEvent, screen } from '@mui-internal/test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { DataGrid, GridOverlay } from '@mui/x-data-grid';
+import { DataGrid, GridOverlay, DataGridProps } from '@mui/x-data-grid';
 import { getCell, getRow } from 'test/utils/helperFn';
 
 describe('<DataGrid /> - Components', () => {
@@ -10,18 +10,9 @@ describe('<DataGrid /> - Components', () => {
 
   const baselineProps = {
     rows: [
-      {
-        id: 0,
-        brand: 'Nike',
-      },
-      {
-        id: 1,
-        brand: 'Adidas',
-      },
-      {
-        id: 2,
-        brand: 'Puma',
-      },
+      { id: 0, brand: 'Nike' },
+      { id: 1, brand: 'Adidas' },
+      { id: 2, brand: 'Puma' },
     ],
     columns: [{ field: 'brand' }],
   };
@@ -64,6 +55,26 @@ describe('<DataGrid /> - Components', () => {
       expect(getCell(0, 0)).to.have.attr('data-name', 'foobar');
     });
 
+    it('should not override cell dimensions when passing `slotProps.cell.style` to the cell', () => {
+      function Test(props: Partial<DataGridProps>) {
+        return (
+          <div style={{ width: 300, height: 500 }}>
+            <DataGrid {...baselineProps} {...props} />
+          </div>
+        );
+      }
+
+      const { setProps } = render(<Test slotProps={{ cell: {} }} />);
+
+      const initialCellWidth = getCell(0, 0).getBoundingClientRect().width;
+
+      setProps({ slotProps: { cell: { style: { backgroundColor: 'red' } } } });
+
+      const cell = getCell(0, 0);
+      expect(cell).toHaveInlineStyle({ backgroundColor: 'red' });
+      expect(cell.getBoundingClientRect().width).to.equal(initialCellWidth);
+    });
+
     it('should pass the props from componentsProps.row to the row', () => {
       render(
         <div style={{ width: 300, height: 500 }}>