如何将 Material UI 选项卡移动到 AppBar 等父级的底部？

【问题标题】：How to move Material UI tabs to the bottom of a parent like AppBar?如何将 Material UI 选项卡移动到 AppBar 等父级的底部？
【发布时间】：2018-09-02 17:37:27
【问题描述】：

如果<Tabs 在AppBar 中，那么将选项卡放在父级底部的最佳做法是什么，比如在标题的底部？

目前我将标题分为 3 个部分：top-bar-left、top-bar-tabs、top-bar-right。我将以下样式应用于选项卡的父级

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

这可行，但不确定 material-ui 的最佳做法是什么

【问题讨论】：

标签： css flexbox material-ui

【解决方案1】：

您是否考虑过通过将 AppBar 的内容移动到 Toolbar 并将 Tabs 作为 AppBar 的第二个孩子来处理这个问题？

        <AppBar position="fixed">
          <Toolbar>
            <Typography variant="title" color="inherit">
              App Title, implement flexbox here
            </Typography>
          </Toolbar>
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" href="#basic-tabs" />
          </Tabs>
        </AppBar>

通过此设置，您可以根据需要划分上方的工具栏，并且选项卡将始终位于其下方。

有关工作示例，请参阅此 codesandbox。

【讨论】：