Css 选项卡中未显示ReactJS材质UI墨水条

小的墨水条不会出现在这个标签下，因为某种原因，它可能是css的东西，但我不能弄清楚，可能缺少一些我也不知道的东西，我一直在拔头发，但我认为标签的高度可能太高了？老实说，我不确定，我正在寻求帮助

_getTabs() {


  let styles = {
      root: {
        backgroundColor: '#333',
        position: 'fixed',
        height: 64,
        top: 0,
        right: 0,
        zIndex: 0,
        width: '100%',
      },
      container: {
        position: 'absolute',
        right: (Spacing.desktopGutter/2) + 48,
        bottom: 0,
      },
      span: {
        color: white,
        left: 65,
        top: 18,
        position: 'absolute',
        fontSize: 26,
      },
      svgLogoContainer: {
        position: 'fixed',
        width: 300,
        left: Spacing.desktopGutter,
      },
      svgLogo: {
        width: 65,
        height: 65,
        backgroundColor: '#333',
        position: 'absolute',
        top: 0,
      },
      tabs: {
        width: 600,
        bottom:0,
        height: 64
      },
      tab: {
        height: 64,
        backgroundColor: '#333'
      },

    };
    let renderedResult;
    let loggedIn = false
    let materialIcon = this.state.tabIndex !== '0' ? (
     <EnhancedButton
        style={styles.svgLogoContainer}
        href="/">
        <span style={styles.span}>MobaRedux</span>
      </EnhancedButton>) : null;

    if (loggedIn) {
    renderedResult = (

        <Paper zDepth={0}
             rounded={false}
             style={styles.root}
        >

      {materialIcon}

          <div style={styles.container}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}
              inkBarStyle={{backgroundColor:"#FFC107"}}>
              <Tab
                value="8"
                label="DASHBOARD"
                style={styles.tab}/>
                <Tab
                value="5"
                label="ABOUT"
                style={styles.tab} />
            </Tabs>


          </div>

        </Paper>


    );
}

else {
  renderedResult = (

        <Paper zDepth={0}
             rounded={false}
             style={styles.root}
        >

            {materialIcon}

          <div style={styles.container}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}
              inkBarStyle={{backgroundColor:"#FFC107"}}>
              <Tab
                value="8"
                label="DASHBOARD"
                style={styles.tab}
                 />
                <Tab
                value="5"
                label="ABOUT"
                style={styles.tab}
                />
            </Tabs>


          </div>

        </Paper>

    );
}
return (
      <div>
        {renderedResult}
      </div>

    );
}

\u getTabs（）{
让样式={
根目录：{
背景颜色：“#333”，
位置：'固定'，
身高：64，
排名：0，
右:0,，
zIndex:0，
宽度：“100%”，
},
容器：{
位置：'绝对'，
右：（间距.DesktopGotter/2）+48，
底部：0，
},
跨度：{
颜色：白色，
左：65，
排名：18，
位置：'绝对'，
尺寸：26，
},
svgLogoContainer：{
位置：'固定'，
宽度：300，
左：Spacing.DesktopGotter，
},
斯夫格洛戈：{
宽度：65，
身高：65，
背景颜色：“#333”，
位置：'绝对'，
排名：0，
},
选项卡：{
宽度：600，
底部：0，
身高：64
},
选项卡：{
身高：64，
背景颜色：“#333”
},
};
让渲染结果；
设loggedIn=false
让materialIcon=this.state.tabIndex！=“0”(
莫巴雷杜克斯
)：null；
if（loggedIn）{
渲染结果=(
{materialIcon}
);
}
否则{
渲染结果=(
{materialIcon}
);
}
返回(
{renderedResult}
);
}

---

下面的蓝色选项卡只是测试选项卡是否可以正常工作

我可以通过修改styles.root的z索引来解决这个问题。您不应该在position:fixed元素上使用z-index:0，因为它只会在其他元素下消失

      root: {
    backgroundColor: '#333',
    position: 'fixed',
    height: 64,
    top: 0,
    right: 0,
    zIndex: 1000, // Here is what i've changed to get it fixed
    width: '100%',
  },

---

似乎是这样的，这就是。u handleTabChange，选项卡的onChange属性正在移除墨条，还不知道为什么。我尝试了它，结果不是问题，这是我尝试的第一件事，实际上，可能是其他地方。在我的评论中，似乎onactive on change负责