Search code examples
javascriptreactjsmaterial-uitreeview

Material-UI TreeView height

Does anyone know how to set material-ui TreeView fixed height or height fitted to display? enter image description here

I want scrollbar to be shown when TreeView content height become 100 for example or 100% of display height. Now when I expand my tree all content that didn't fit, goes away of the display bottom.

Solution

  • Just modify the root style of TreeView component. Add your desirable height to the height attribute and then assing overflow to auto to make the whole TreeView component scrollable. Sandbox

    const useStyles = makeStyles({
  root: {
    height: "50px",
    flexGrow: 1,
    maxWidth: 400,
    overflow: "auto"
  }
});
<TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >