Merge pull request #8804 from marmelab/Datagrid-className

[Minor BC] Fix `<Datagrid>` does not apply `className` to its root element
marmelab · Apr 7, 2023 · 27fc437 · 27fc437
2 parents 4eb4f4c + c351ce4
commit 27fc437
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
@@ -9,7 +9,7 @@ import {
     useGetList,
     useList,
 } from 'ra-core';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import { TextField } from '../../field';
@@ -381,3 +381,33 @@ export const IsRowExpandable = () => (
         </Datagrid>
     </Wrapper>
 );
+
+const StyledDatagrid = styled(Datagrid, {
+    name: 'MyStyledDatagrid',
+    overridesResolver: (props, styles) => styles.root,
+})(() => ({
+    width: '70%',
+    backgroundColor: '#ffb',
+}));
+
+export const StyledComponent = () => (
+    <Wrapper>
+        <Datagrid
+            sx={{
+                width: '70%',
+                backgroundColor: '#ffb',
+            }}
+        >
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="author" />
+            <TextField source="year" />
+        </Datagrid>
+        <StyledDatagrid>
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="author" />
+            <TextField source="year" />
+        </StyledDatagrid>
+    </Wrapper>
+);
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
@@ -228,7 +228,10 @@ export const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
      */
     return (
         <DatagridContextProvider value={contextValue}>
-            <DatagridRoot sx={sx} className={DatagridClasses.root}>
+            <DatagridRoot
+                sx={sx}
+                className={clsx(DatagridClasses.root, className)}
+            >
                 {bulkActionButtons !== false ? (
                     <BulkActionsToolbar selectedIds={selectedIds}>
                         {isValidElement(bulkActionButtons)
@@ -239,7 +242,7 @@ export const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
                 <div className={DatagridClasses.tableWrapper}>
                     <Table
                         ref={ref}
-                        className={clsx(DatagridClasses.table, className)}
+                        className={DatagridClasses.table}
                         size={size}
                         {...sanitizeRestProps(rest)}
                     >