How do I maintain the vertical scroll functionality, while at the same time, hiding the scrollbar in Material UI's Treeview API? I have tried a few combinations of styling directly in the tree view and tree item components to hide the scrollbar, but neither worked for me.
<TreeView
aria-label="icon expansion"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 240, flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
>
<StyledTreeItem
label={
<Grid container>
<Grid item xs={3}>
Watchlist
</Grid>
<Grid item xs={8}>
</Grid>
</Grid>
}
nodeId="1"
style={{ padding: '0.2vw' }}>
<Grid container style={{ width: '100%' }}>
<LiveStockTable
minHeight={500}
maxHeight={1000}
subscribedTickers={props.subscribedTickers} />
</Grid>
</StyledTreeItem>
</TreeView>
and the StyledTreeItem:
const StyledTreeItem = styled(TreeItem)<StyledTreeItemProps>({
position: "relative",
"&:before": {
pointerEvents: "none",
content: '""',
position: "absolute",
overflow: 'hidden'
},
[`& .${treeItemClasses.group}`]: {
marginLeft: 0,
paddingLeft: 0,
}
})