[DataGrid] Add support for sx prop (#3281)

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -171,6 +171,12 @@
         "description": "Array&lt;{ field: string, sort?: 'asc'<br>&#124;&nbsp;'desc' }&gt;"
       }
     },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
+    },
     "throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
     "treeData": { "type": { "name": "bool" } }
   },

docs/pages/api-docs/data-grid/data-grid.json

@@ -140,6 +140,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ field: string, sort?: 'asc'<br>&#124;&nbsp;'desc' }&gt;"
       }
+    },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
     }
   },
   "slots": {

docs/scripts/api/buildComponentDocumentation.ts

@@ -264,6 +264,8 @@ export default async function buildComponentDocumentation(
 
       if (propName === 'classes') {
         description += ' See <a href="#css">CSS API</a> below for more details.';
+      } else if (propName === 'sx') {
+        description += ' See the <a href="/system/the-sx-prop/">`sx` page</a> for more details.';
       }
       componentApi.propDescriptions[propName] = linkify(description, documentedInterfaces, 'html');
 

docs/src/pages/components/data-grid/style/SxProp.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function SxProp() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        sx={{
+          boxShadow: 2,
+          border: 2,
+          borderColor: 'primary.light',
+          '& .MuiDataGrid-cell:hover': {
+            color: 'primary.main',
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/style/SxProp.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function SxProp() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        sx={{
+          boxShadow: 2,
+          border: 2,
+          borderColor: 'primary.light',
+          '& .MuiDataGrid-cell:hover': {
+            color: 'primary.main',
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/style/SxProp.tsx.preview

@@ -0,0 +1,11 @@
+<DataGrid
+  {...data}
+  sx={{
+    boxShadow: 2,
+    border: 2,
+    borderColor: 'primary.light',
+    '& .MuiDataGrid-cell:hover': {
+      color: 'primary.main',
+    },
+  }}
+/>

docs/src/pages/components/data-grid/style/style.md

@@ -6,6 +6,19 @@ title: Data Grid - Styling
 
 <p class="description">The grid CSS can be easily overwritten.</p>
 
+## Using the `sx` prop
+
+For one-off styles, the `sx` prop can be used.
+It allows to apply simple to complex customizations directly onto the `DataGrid` element.
+The keys accepted can be any CSS property as well as the custom properties provided by MUI.
+For more details, visit the [`sx` prop page](/system/the-sx-prop/).
+
+```tsx
+<DataGrid sx={{ m: 2 }} /> // Sets the margin to 2 times the spacing unit = 16px
+```
+
+{{"demo": "pages/components/data-grid/style/SxProp.js", "bg": "inline"}}
+
 ## Styling column headers
 
 The `GridColDef` type has properties to apply class names and custom CSS on the header.

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -105,6 +105,7 @@
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "throttleRowsMs": "If positive, the Grid will throttle updates coming from <code>apiRef.current.updateRows</code> and <code>apiRef.current.setRows</code>. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.",
     "treeData": "If <code>true</code>, the rows will be gathered in a tree structure according to the <code>getTreeDataPath</code> prop."
   },

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -105,6 +105,7 @@
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "throttleRowsMs": "If positive, the Grid will throttle updates coming from <code>apiRef.current.updateRows</code> and <code>apiRef.current.setRows</code>. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.",
     "treeData": "If <code>true</code>, the rows will be gathered in a tree structure according to the <code>getTreeDataPath</code> prop."
   },

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -105,6 +105,7 @@
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "throttleRowsMs": "If positive, the Grid will throttle updates coming from <code>apiRef.current.updateRows</code> and <code>apiRef.current.setRows</code>. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.",
     "treeData": "If <code>true</code>, the rows will be gathered in a tree structure according to the <code>getTreeDataPath</code> prop."
   },

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -88,7 +88,8 @@
     "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
-    "sortModel": "Set the sort model of the grid."
+    "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "autoHeight": {

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -88,7 +88,8 @@
     "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
-    "sortModel": "Set the sort model of the grid."
+    "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "autoHeight": {

docs/translations/api-docs/data-grid/data-grid.json

@@ -88,7 +88,8 @@
     "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
-    "sortModel": "Set the sort model of the grid."
+    "sortModel": "Set the sort model of the grid.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "autoHeight": {

packages/grid/_modules_/grid/GridComponentProps.ts

@@ -1,4 +1,6 @@
-import * as React from 'react';
+import { CommonProps } from '@mui/material/OverridableComponent';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { GridInitialState } from './models/gridState';
 import { GridApiRef } from './models/api/gridApiRef';
 import {
@@ -40,7 +42,7 @@ export interface GridComponentProps
     GridProcessedMergedOptions,
     GridComponentOtherProps {}
 
-interface GridComponentOtherProps {
+interface GridComponentOtherProps extends CommonProps {
   /**
    * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
    */
@@ -361,10 +363,6 @@ interface GridComponentOtherProps {
    * The id of the element containing a label for the grid.
    */
   'aria-labelledby'?: string;
-  /**
-   * @ignore - do not document
-   */
-  className?: string;
   /**
    * Set of columns of type [[GridColumns]].
    */
@@ -395,10 +393,6 @@ interface GridComponentOtherProps {
    * If one of the data in `initialState` is also being controlled, then the control state wins.
    */
   initialState?: GridInitialState;
-  /**
-   * @ignore - do not document
-   */
-  style?: React.CSSProperties;
   /**
    * Overrideable components props dynamically passed to the component at rendering.
    */
@@ -409,4 +403,8 @@ interface GridComponentOtherProps {
   groupingColDef?:
     | GridColDefOverride<'field' | 'editable'>
     | GridColDefOverrideCallback<'field' | 'editable'>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }

packages/grid/_modules_/grid/components/containers/GridRoot.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useForkRef } from '@mui/material/utils';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import NoSsr from '@mui/material/NoSsr';
 import { GridRootContainerRef } from '../../models/gridRootContainerRef';
 import { GridRootStyles } from './GridRootStyles';
@@ -11,12 +14,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../gridClasses';
 import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
 
-export type GridRootProps = React.HTMLAttributes<HTMLDivElement>;
+export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
 
-export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(
-  props,
-  ref,
-) {
+const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const { children, className, ...other } = props;
   const apiRef = useGridApiContext();
@@ -31,7 +36,7 @@ export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function
     <NoSsr>
       <GridRootStyles
         ref={handleRef}
-        className={clsx(className, rootProps.classes?.root, rootProps.className, gridClasses.root, {
+        className={clsx(className, rootProps.classes?.root, gridClasses.root, {
           [gridClasses.autoHeight]: rootProps.autoHeight,
         })}
         role="grid"
@@ -40,11 +45,27 @@ export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function
         aria-multiselectable={!rootProps.disableMultipleSelection}
         aria-label={rootProps['aria-label']}
         aria-labelledby={rootProps['aria-labelledby']}
-        style={rootProps.style}
         {...other}
       >
         {children}
       </GridRootStyles>
     </NoSsr>
   );
 });
+
+GridRoot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export { GridRoot };

packages/grid/x-data-grid-pro/package.json

@@ -45,6 +45,7 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.1.1",
+    "@mui/system": "^5.1.1",
     "react": "^17.0.2"
   },
   "setupFiles": [

packages/grid/x-data-grid-pro/src/DataGridPro.tsx

@@ -40,7 +40,7 @@ const DataGridProRaw = React.forwardRef<HTMLDivElement, DataGridProProps>(functi
 
   return (
     <GridContextProvider apiRef={apiRef} props={props}>
-      <GridRoot ref={ref}>
+      <GridRoot className={props.className} style={props.style} sx={props.sx} ref={ref}>
         <GridErrorHandler>
           <GridHeaderPlaceholder />
           <GridBody
@@ -109,10 +109,6 @@ DataGridProRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * @ignore - do not document
-   */
-  className: PropTypes.string,
   /**
    * Number of extra columns to be rendered before/after the visible slice.
    * @default 3
@@ -690,9 +686,13 @@ DataGridProRaw.propTypes = {
     }),
   ),
   /**
-   * @ignore - do not document
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  style: PropTypes.object,
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   /**
    * If positive, the Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

packages/grid/x-data-grid-pro/src/tests/DataGridPro.spec.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+function SxTest() {
+  <DataGridPro rows={[]} columns={[]} sx={{ color: 'primary.main' }} />;
+}

packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@material-ui/monorepo/test/utils';
+import { createRenderer, screen } from '@material-ui/monorepo/test/utils';
 import { expect } from 'chai';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { GridApiRef, useGridApiRef, DataGridPro, ptBR } from '@mui/x-data-grid-pro';
@@ -147,4 +147,27 @@ describe('<DataGridPro /> - Layout', () => {
     );
     expect(document.querySelector('[title="Ordenar"]')).not.to.equal(null);
   });
+
+  it('should support the sx prop', () => {
+    const theme = createTheme({
+      palette: {
+        primary: {
+          main: 'rgb(0, 0, 255)',
+        },
+      },
+    });
+
+    render(
+      <ThemeProvider theme={theme}>
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro columns={[]} rows={[]} sx={{ color: 'primary.main' }} />
+        </div>
+      </ThemeProvider>,
+    );
+
+    // @ts-expect-error need to migrate helpers to TypeScript
+    expect(screen.getByRole('grid')).toHaveComputedStyle({
+      color: 'rgb(0, 0, 255)',
+    });
+  });
 });

packages/grid/x-data-grid/package.json

@@ -44,6 +44,7 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.1.1",
+    "@mui/system": "^5.1.1",
     "react": "^17.0.2"
   },
   "setupFiles": [