From b7e10e72be542559ba60a2025362240d335da1b7 Mon Sep 17 00:00:00 2001
From: Mark Toman <marktomandev@gmail.com>
Date: Mon, 30 Jan 2023 17:59:29 +0100
Subject: [PATCH] [DataGrid] Merge row styles with `componentsProps.row.style`
 (#7641)

Resolves https://github.com/mui/mui-x/issues/6846
---
 .../src/tests/detailPanel.DataGridPro.test.tsx | 18 ++++++++++++++++++
 .../virtualization/useGridVirtualScroller.tsx  | 12 ++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
index de2271f16d5fc..561a32dcb9a03 100644
--- a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
@@ -653,4 +653,22 @@ describe('<DataGridPro /> - Detail panel', () => {
       });
     });
   });
+
+  it('should merge row styles when expanded', () => {
+    render(
+      <TestCase
+        getDetailPanelHeight={() => 0}
+        nbRows={1}
+        getDetailPanelContent={() => <div />}
+        componentsProps={{
+          row: { style: { color: 'yellow' } },
+        }}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    expect(getRow(0)).toHaveInlineStyle({
+      color: 'yellow',
+      marginBottom: '0px', // added when expanded
+    });
+  });
 });
diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index e121586c369c0..dcca7fadd5996 100644
--- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -492,6 +492,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
         isSelected = apiRef.current.isRowSelectable(id);
       }
 
+      const { style: rootRowStyle, ...rootRowProps } = rootProps.componentsProps?.row || {};
+      const { style: rowStyle, ...rowProps } =
+        (typeof getRowProps === 'function' && getRowProps(id, model)) || {};
+
       rows.push(
         <rootProps.components.Row
           key={id}
@@ -510,8 +514,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
           containerWidth={availableSpace}
           isLastVisible={lastVisibleRowIndex}
           position={position}
-          {...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}
-          {...rootProps.componentsProps?.row}
+          {...rowProps}
+          {...rootRowProps}
+          style={{
+            ...rowStyle,
+            ...rootRowStyle,
+          }}
         />,
       );
     }