在抽屉组件底部添加项目答案

【问题标题】：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>

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

【问题讨论】：

标签： reactjs navigation-drawer drawer react-navigation-drawer react-tsx

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

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

【讨论】：