ReactJS材質UI墨跡條不出現在標籤上

由於某種原因，小墨棒不會出現在此標籤下，它可能是CSS的東西，但我無法弄清楚，可能會丟失一些我不知道的東西無論如何，我一直在拉我的頭髮，但我認爲標籤高度可能太高？我不確定並且正在尋求一些幫助。ReactJS材質UI墨跡條不出現在標籤上

_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> 

    ); 
}

的藍色標籤下面是我剛剛測試一個標籤的工作一般

來源

2016-07-30 Karan

似乎是這樣，它的this._handleTabChange，移除墨跡欄的標籤的onChange屬性，不知道爲什麼。 – Karan

我能夠通過修改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%', 
    },

來源

2016-08-11 05:27:14 codejunkienick

我試了一下，結果不是問題，是我實際嘗試的第一件事，也許它可能在其他地方 – Karan

看看我的評論，它似乎對改變的積極負責是負責任的 – Karan

ReactJS材質UI墨跡條不出現在標籤上

回答

相關問題