Hiding Scrollbar from Material UI Treeview, while maintaining scroll functionality

466 views Asked by At

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,
        }
    })
0

There are 0 answers