ReactJSタブの材質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> 

    ); 
} 

青色のタブが下に私はちょうど私がstyles.rootのz屈折率を変更することによってこの問題を解決することができた一般

Answer 1

でそのタブの作業をテストしています。 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%', 
    },