由于某种原因,小墨水条不会出现在此选项卡下,它可能是 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-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%',
},
关于css - ReactJS Material UI inkbar 不显示选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38669319/