如何为Material UI ListItem添加垂直滚动，仅展示2项其余滚动查看

实现方案 #

你只需要给List组件添加高度限制和滚动样式即可，带Avatar的Material UI ListItem默认高度为72px，2个ListItem的总高度为144px，配置后超出高度的内容会自动出现垂直滚动条：

<List 
  sx={{
    maxHeight: 144, // 刚好容纳2个带Avatar的ListItem，可根据实际自定义高度调整
    overflowY: 'auto'
  }}
>
{
  props.selectedPLayers?.map((item, index) =>{ 
    return (
      <ListItem key={index} alignItems="flex-start" >
        <ListItemAvatar>
          <Avatar alt="Remy Sharp">{getInitials(item.name)}</Avatar>
        </ListItemAvatar> 
         <Typography>{item.name}</Typography>                      
      </ListItem>
    )
  })
}
</List>

补充说明 #

• 如果你的ListItem自定义了内边距、字体大小等样式，只需要调整maxHeight的值为两个自定义ListItem的总高度即可
• 原代码缺少map循环必须的key属性，上述代码已补充，也可以替换为item里的唯一字段如用户id
• 你代码中的变量名selectedPLayers拼写可能存在笔误，标准写法为selectedPlayers

内容的提问来源于stack exchange，提问作者asif kaif