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%',
  },

ReactJS Material UI墨迹栏未显示选项卡

1 个答案: