[DataGrid] Merge row styles with componentsProps.row.style (#7641)

Resolves #6846
mui · Jan 30, 2023 · b7e10e7 · b7e10e7
1 parent 18b8f60
commit b7e10e7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 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
@@ -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
@@ -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,
+          }}
         />,
       );
     }