Question

我想将Material-I菜单中嵌套菜单的高度限制为500px。虽然我可以使用“maxHeight”限制初始/主菜单，但似乎无法设置子菜单的样式（列出嵌套的MenuItems）

Answer 1

您可以使用nestedListStyle属性（MenuItem基本上是ListItem的包装，其中记录了该属性）

<Menu>
  <MenuItem primaryText="Menu Item 1" />
  <MenuItem primaryText="Menu Item 2" />
  <MenuItem
    nestedListStyle={{ maxHeight: 100, overflow: 'auto' }}
    primaryText="Hello"
    nestedItems={[
      <MenuItem key={1} primaryText="Child 1" />,
      <MenuItem key={2} primaryText="Child 2" />,
      <MenuItem key={3} primaryText="Child 3" />,
      <MenuItem key={4} primaryText="Child 4" />,
      <MenuItem key={5} primaryText="Child 5" />,
      <MenuItem key={6} primaryText="Child 6" />,
      <MenuItem key={7} primaryText="Child 7" />,
      <MenuItem key={8} primaryText="Child 8" />,
    ]}
  />
</Menu>

Answer 2

纸质道具

 <Menu
    id="long-menu"
    anchorEl={anchorEl}
    open={open}
    onClose={this.handleClose}
    PaperProps={{
                            style: {
                                maxHeight: ITEM_HEIGHT * 4.5,
                                width: 200,
                            },
                        }}
                    >

Answer 3

menuItem:{
            overflowY:'auto',
            maxHeight:'100px' //Change it accordingly
}

<div className={classes.menuItem}>
     
    <MenuItem value={'abc'} >abc</MenuItem>
    <MenuItem value={'xyz'} dense={true}>xyz</MenuItem>
    <MenuItem value={'qwe'} dense={true}>qwe</MenuItem>
    <MenuItem value={'iop'} dense={true}>iop</MenuItem>
    <MenuItem value={'egx'} dense={true}>egx</MenuItem>
    <MenuItem value={'bge'} dense={true}>bge</MenuItem>

 </div>

如何在Material-UI中设置嵌套菜单的maxHeight？

3 个答案: