ReactJS Material UI 墨水栏没有出现在选项卡中

Question

由于某种原因，小墨条不会出现在此选项卡下，它可能是 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>

    );
}

下面的蓝色标签是我只是在测试这些标签是否能正常工作

Answer 1

我可以通过修改 styles.root 的 z-index 来解决这个问题。您不应该在 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%',
  },