[DataGrid] Add overridesResolver

[DanailH]

I think these are all the places where it needs to be added. There are other places where styled has been used but they are to change specific styles of a core component and we don't expose that slot in gridClasses.

Also, I wasn't able to break these demos https://deploy-preview-2995--material-ui-x.netlify.app/components/data-grid/style/#styling-cells 👀

[m4theushw]

Could you rebase/merge with next? I already fixed the argos screenshot, it should not fail on this one.

[m4theushw]

If we only apply the styles from root, the remaining styles won't work, which would be a breaking change. See https://codesandbox.io/s/datagriddemo-material-demo-forked-wdcrd?file=/demo.js

What do you think about manually fetching the overrides and applying them to each "slot"? The main trade-off I see is that it raises the specificity to 2, while with @mui/styles it was 1. However, the overrides will always win because they are applied at the end.

diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
index d5c60417..d061de1a 100644
--- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
+++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
@@ -1,4 +1,4 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSInterpolation, CSSObject } from '@mui/system';
 import { darken, lighten, alpha, styled } from '@mui/material/styles';
 import { gridClasses } from '../../gridClasses';

@@ -7,6 +7,8 @@ export const GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => {
+  const overrides = theme.components?.MuiDataGrid?.styleOverrides;
+
   const borderColor =
     theme.palette.mode === 'light'
       ? lighten(alpha(theme.palette.divider, 1), 0.88)
@@ -26,6 +28,7 @@ export const GridRootStyles = styled('div', {
     flexDirection: 'column',
     [`&.${gridClasses.autoHeight}`]: {
       height: 'auto',
+      ...overrides?.autoHeight as CSSObject
     },
     [`& .${gridClasses.main}`]: {
       position: 'relative',

[m4theushw]

The TablePagination component applies the overrides from other slots in the overrides resolver: /~https://github.com/mui-org/material-ui/blob/b6cdaaf1a7f60de9ed66a491b7477fad19429905/packages/mui-material/src/TablePagination/TablePagination.js#L76

I think we can adopt the same pattern and ignore my suggestion. @mnajdova could help.

[mnajdova]

Suggested change

	overridesResolver: (props, styles) => styles.root,
	overridesResolver: (props, styles) => {
	return [
	{ [`& .${gridClasses.autoHeight}`]: styles.autoHeight },
	styles.root,
	];
	},

I would suggest doing something like this. Using an array, instead of spreading objects, means that emotion is responsible for merging them correctly. We should have this in all components, but seems like in the TablePaginationToolbar it was not converted, I will fix this. Take a look for example how it is done in the Accordion component - /~https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L38

[DanailH]

Alright, thanks for the examples. I update the resolver. Seems to be working correctly now.
@m4theushw I removed some classes that were left behind when you reworked the virtualization. They were not used anywhere.

[m4theushw]

Looks good. The example is working again: https://codesandbox.io/s/datagriddemo-material-demo-forked-wdcrd?file=/demo.js

Only a few small things left but this one can be merged.

[DanailH]

I'll merge this even tho the roving index e2e test is failing. That is the only problem.