在抽屉组件底部添加项目

Posted 2023-04-13

【中文标题】在抽屉组件底部添加项目

【英文标题】：Add item at the bottom of a drawer component

【发布时间】：2021-10-16 00:22:28

【问题描述】：

如何在底部放置抽屉组件的条目？ （而不是从顶部连续）

例如，我希望帮助项目位于抽屉导航的底部。

这是我目前的代码

     <Drawer
        variant="persistent"
        anchor="left"
      >
        <List>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>


          <ListItem
            style= position: "absolute", bottom: "0" 
            dense
            button
            component=Link
            to="/help"
          >
            <ListItemIcon><HelpIcon /></ListItemIcon>
            <ListItemText primary="Help" />
          </ListItem>
        </List>
      </Drawer>

过去有一些关于这个主题的帖子，但没有与使用列表组件构建抽屉组件有关。

【参考方案1】：

我能想到的最简单的答案是在ListItem 中添加margin-top: auto（可能是marginTop 作为样式道具）

【讨论】：

很遗憾，margin-top/margin-buttom 样式选项不起作用。

【参考方案2】：

我找到了解决办法！！创建一个单独的列表并将style= position: "absolute", bottom: "0" 添加到其样式属性中。