[DataGrid] Fix cell slot style override (#11215)

Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Dec 6, 2023 · 164a80a · 164a80a
1 parent bbdf16a
commit 164a80a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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,16 +681,18 @@ const GridCellV7 = React.forwardRef<HTMLDivElement, GridCellV7Props>((props, ref
         opacity: 0,
         width: 0,
         border: 0,
+        ...styleProp,
       };
     }
     const cellStyle = {
       minWidth: width,
       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
@@ -2,26 +2,17 @@ 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', () => {
   const { render } = createRenderer();
 
   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 }}>