From db3f8a74a782ff29292ffe786286aec81443074a Mon Sep 17 00:00:00 2001
From: Andres Kalle <mjomble@gmail.com>
Date: Mon, 20 Sep 2021 08:18:45 +0000
Subject: [PATCH] Added expandedPanel to Datagrid styles

---
 docs/List.md                                        |  1 +
 .../src/list/datagrid/DatagridRow.tsx               | 13 +++++++++++--
 .../src/list/datagrid/useDatagridStyles.tsx         |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index c3e59e3c864..79de6d89926 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -2394,6 +2394,7 @@ The `Datagrid` component accepts the usual `className` prop but you can override
 | `expandIconCell` | Applied to each expandable cell                               |
 | `expandIcon`     | Applied to each expand icon                                   |
 | `expanded`       | Applied to each expanded icon                                 |
+| `expandedPanel`  | Applied to each expandable panel                              |
 | `checkbox`       | Applied to each checkbox cell                                 |
 
 You can customize the `<Datagrid>` styles by passing a `classes` object as prop, through `useStyles()`. Here is an example:
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
index d1a7b9011d8..6583a9877a0 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
@@ -40,7 +40,12 @@ const computeNbColumns = (expand, children, hasBulkActions) =>
           React.Children.toArray(children).filter(child => !!child).length // non-null children
         : 0; // we don't need to compute columns if there is no expand panel;
 
-const defaultClasses = { expandIconCell: '', checkbox: '', rowCell: '' };
+const defaultClasses = {
+    expandIconCell: '',
+    checkbox: '',
+    rowCell: '',
+    expandedPanel: '',
+};
 
 const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
     const {
@@ -199,7 +204,11 @@ const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
                 )}
             </TableRow>
             {expandable && expanded && (
-                <TableRow key={`${id}-expand`} id={`${id}-expand`}>
+                <TableRow
+                    key={`${id}-expand`}
+                    id={`${id}-expand`}
+                    className={classes.expandedPanel}
+                >
                     <TableCell colSpan={nbColumns}>
                         {isValidElement(expand)
                             ? cloneElement(expand, {
diff --git a/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx b/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx
index 13f7f8302e2..6e237de368f 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx
@@ -45,6 +45,7 @@ const useDatagridStyles = makeStyles(
         expanded: {
             transform: 'rotate(0deg)',
         },
+        expandedPanel: {},
     }),
     { name: 'RaDatagrid' }
 );