Material-table: Change scrollbars style

[aureliennezzar]

Hi, im searching to get rid of the 2px white border around scrollbars of the table.
Any hints of how to overwrite scrollbar theme ?

Here its how its look like :

Thanks in advance !

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[VLRTroll]

@aureliennezzar, if you until need this answer, let's go.

const useStyles = makeStyles({
  tableScrollBar: {
    '& .Component-horizontalScrollContainer-12 ::-webkit-scrollbar-thumb': {
      //CSS Styles here
      borderColor: 'red', // <- This is just an example
    }
  }
});

const App = () => {
  const classes = useStyles();
  ...
  return (
    <MaterialTable
      ...
      components={{
        Container: props => <Paper {...props} className = {classes.tableScrollBar}/>
      }}
    />
  );
};

[aureliennezzar]

Thanks I will try to update this old project 😁

[Justin2997]

Class : Component-horizontalScrollContainer-12 is generate on every build. The number change. You should do someting like this : [class*="Component-horizontalScrollContainer"].

[aureliennezzar]

Class : Component-horizontalScrollContainer-12 is generate on every build. The number change. You should do someting like this : [class*="Component-horizontalScrollContainer"].

Okay, thanks you very much 😀

[Justin2997]

@aureliennezzar You have also to do a custom "regex" when you build you app. The class should be something link jss12 or jss25...