[BUG] TableVirtuoso with MUI and useWindowScroll renders double scrollbar

[terryma]

Describe the bug
When using TableVirtuoso with MUI as seen in https://virtuoso.dev/mui-table-virtual-scroll/ combined with useWindowScroll, I'm seeing double vertical scrollbars (one for the TableContainer, another for the window if the content is longer than the viewport height)

Reproduction
https://codesandbox.io/s/sandpack-project-forked-pd4uo4

This is a fork of https://virtuoso.dev/mui-table-virtual-scroll/, where the only change is remove the fixed height on TableVirtuoso and turn on useWindowScroll. This problem doesn't seem to happen with the non MUI example.

Screenshots

[petyosi]

@terryma feel free to adjust that up to your liking - my assumption is that a certain style should be overridden on the MUI side.

[gadicc]

It's this:

const TableComponents = {
  Scroller: React.forwardRef((props, ref) =>
    <MUITable.TableContainer component={MUITable.Paper} {...props} ref={ref} />),
  //...
}

MuiTableContainer-root has overflow-x: auto which causes the problem. You can override like this:

<MUITable.TableContainer
  component={MUITable.Paper}
  {...props}
  ref={ref}
  sx={{ overflowX: "initial" }} // <-- add this
/>