[DataGrid] The CSS customization section is misleading

[oliviertassinari]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

1. The "implementation of the component style " link in https://material-ui.com/api/data-grid/#css is a 404
2. The data grid fails the classes prop conformance: https://codesandbox.io/s/material-demo-forked-6n2eu?file=/demo.tsx

Expected Behavior 🤔

1. A working link
2. A working classes prop

Context 🔦

The issue was reported by a user under the wrong channel ([email protected]).

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

Order id 💳

21793

[holdenmatt]

I also just hit this trying to add classes to a DataGrid and found this issue.

I'll use global CSS as a workaround for now, but am otherwise using CSS modules so having a working classes prop would be great!

[oliviertassinari]

@holdenmatt We only plan to include classes.root as the data grid relies heavily on one level descendant CSS selectors. Would it work for you?

[holdenmatt]

I'm adding some CSS to customize a few classes like .MuiDataGrid-cell and .MuiDataGrid-columnSeparator.
AFAIK, I can't do that using only className or classes.root?

I ended up using a global SCSS file with nested selectors, which works fine. Slight preference for having a method that would let me define scoped styles with my component rather than globally. But if not, this works fine.

[oliviertassinari]

@holdenmatt Correct. If you are used to CSS modules, you could still apply the root class name to the root of the data grid, and then, use global descendant CSS selectors to target what you need. For instance, to get something like this at the end:

.a12vt .MuiDataGrid-cell {
  background-color: red;
}

<DataGrid className="a12vt" />

[oliviertassinari]

I have added the "good to take" label as the solution should be as simple as:

1. Replacing https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts with the correct URL.
2. Adding a classes prop with a single root key. This is for consistency with the other components.