修复material-ui中的标签栏答案

【问题标题】：Fixing tab bar in material-ui修复material-ui中的标签栏
【发布时间】：2016-01-18 01:50:21
【问题描述】：

我正在尝试在屏幕底部固定选项卡组件。我试过了

<Tabs
  contentContainerStyle={{position: "fixed"}}
>
</Tabs>

甚至style={{position:"fixed"}}

如何修复底部的选项卡？

【问题讨论】：

我猜你需要 {{position:fixed;bottom:0px;}}
对不起，我想澄清一下：position:fixed 不能修复标签。
你试过在 div 中包装标签吗？ <div style={{ position: fixed; bottom: 0 }}><Tabs /></div>

标签： reactjs material-ui

【解决方案1】：

这对我有用

<div style={{position: "fixed", bottom:"0", width:"100%"}}>
 <Tabs>
   <Tab icon={<ActionFlightTakeoff />} />
     <Tab icon={<ActionFlightTakeoff />} />
     <Tab icon={<ActionFlightTakeoff />} />
   </Tabs>
</div>

【讨论】：

以下设置在视觉上可以工作，但是事件侦听器和活动选项卡指示器意外呈现无用。

【解决方案2】：

我像这样使用 tabItemContainerStyle：

<code>
    <Tabs tabItemContainerStyle={{position: "fixed", bottom:"0"}}>
    </Tabs>
</code>

【讨论】：

请解释一下，这也是如何解决的。
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。