React - MUI Data Grid (Free) Styled Scrollbars (Example Code Sandbox Provided)

Question

I'm trying to get my MUI grid scrollbars to look nicer - kind of like react-scrollbars, but I don't think you can wrap MUI grid in custom scrollbars to the best of my knowledge (i've tried and it's always failed).

Given that, I'm trying to directly edit the CSS classes for the scrollbars on the grid, but again, no luck.

Anyone know how to do this?

An example application for testing can be found here: https://codesandbox.io/s/mui-grid-styled-scrollbars-9wpr9i?file=/src/App.js

Answer 1

I messed around with the styling a bit and this is what I got to work:

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  "& ::-webkit-scrollbar": {
    width: "6px"
  },
  "& ::-webkit-scrollbar-track": {
    backgroundColor: "#f5f5f5"
  },
  "& ::-webkit-scrollbar-thumb": {
    borderRadius: "10px",
    boxShadow: "inset 0 0 6px rgba(0,0,0,.3)",
    backgroundColor: "#f5f5f5"
  }
}));