[DataGrid] horizontal scroll behavior is different between light mode and dark mode

[trfv]

• 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 😯

DataGrid horizontal scroll behavior is different between light mode and dark mode.

datagrid_horizontal_scroll.mov

Expected Behavior 🤔

Dark mode behavior should be the same as light mode one.

Steps to Reproduce 🕹

You can try it here.
https://material-ui.com/components/data-grid/components/

Context 🔦

I tried to implement dark mode, and found this bug.
The difference may come from here.
https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts#L331-L363

Your Environment 🌎

macOS Big Sur version 11.2.3
Google Chrome 90.0.4430.93（Official Build） （x86_64）

[oliviertassinari]

Interesting, yeah, we knew about this when we picked the current implementation: #660 (comment)

[trfv]

@oliviertassinari

Thank you for your quick response. I could not find this discussion... 🙇

Then, are there any workaround?
I tried this way in my repo and all scroll bar are hidden.

const theme = createMuiTheme({
...
overrides: {
   MuiCssBaseline: {
     "@global": {
       "*::-webkit-scrollbar": {
         display: "none",
     },
   },
 },
...
});

[oliviertassinari]

I have removed the "docs" label as it's not specific to our docs (it's only one way to reproduce it). We can create the same reproduction in codesandbox simply by enabling the dark mode: https://codesandbox.io/s/material-demo-forked-pt05q?file=/demo.tsx.

[dtassone]

I have removed the "docs" label as it's not specific to our docs (it's only one way to reproduce it). We can create the same reproduction in codesandbox simply by enabling the dark mode: https://codesandbox.io/s/material-demo-forked-pt05q?file=/demo.tsx.

I don't see a horizontal scrollbar on this codesandbox 🤔

[oliviertassinari]

For me, it requires the default params:

Then, I get:

[dtassone]

Yes I have the auto setting.

🤔

[trfv]

My setting is "When scrolling".

[oliviertassinari]

In any case, this bug is expected. We measure the scrollbar width on a hidden element, which returns 0px. Then, with CSS we force a scrollbar width on the data grid container. The horizontal scroll is of the width of the scrollbar we force.

[socramm]

Are there any plans to change this behavior in the future? My customer is not pleased that a horizontal scrollbar is visible when not clearly needed.

I am currently looking for a workaround. Is it maybe possible to always use the default scrollbar regardless of dark or light mode?

A other solution that I am thinking of in the moment is to check programmatically if a header is overflowing and hide the scrollbar based on that.

[Primajin]

Also we have the issue that the scrollbars in dark mode don't automatically read the global theme colors but rather have some colors and borders hardcoded.

Our normal scrollbars in dark mode on Windows vs the ones in datagrid:

Relates to: mui/material-ui#25016

[oliviertassinari]

Interesting. In mui/material-ui#25016 , I was proposing to expose darkScrollbar so developers could override other scroll containers, like the one of this component.

In your case, we might need to have a dedicated theme variable. But maybe we can be smart about it and start from the background color.

[oliviertassinari]

I have opened #1805 to use the opportunity found by Matheus.