Reactjs 选项卡导航栏隐藏其下方的元素

我正在使用

Tab

编写导航栏。我的选项卡导航栏几乎与以下内容相同：

从“React”导入React；
进口{
AppCanvas，
IconButton，
增强按钮，
混血儿，
风格，
标签，
标签，
纸张}来自“材料界面”；
const{StylePropable}=Mixins；
常量{颜色、间距、排版}=样式；
const-themanager=Styles.themanager；
const DefaultRawTheme=Styles.LightRawTheme；
const Master=React.createClass({
mixins:[StylePropable]，
getInitialState（）{
让muiTheme=themeanager.getMuiTheme（DefaultRawTheme）；
//要切换到RTL。。。
//muiTheme.isRtl=true；
返回{
博物馆，
};
},
道具类型：{
子项：React.PropTypes.node，
历史记录：React.PropTypes.object，
位置：React.PropTypes.object，
},
childContextTypes：{
muiTheme:React.PropTypes.object，
},
getChildContext（）{
返回{
博物馆：这个。州。博物馆，
};
},
getStyles（）{
设darkWhite=Colors.darkWhite；
返回{
页脚：{
背景颜色：Colors.grey900，
textAlign:'中心'，
},
a:{
颜色：暗白色，
},
p:{
边距：“0自动”，
填充：0，
颜色：颜色。浅白色，
最大宽度：335，
},
github：{
位置：'固定'，
右：Spacing.DesktopGotter/2，
前8名，
zIndex:5，
颜色：'白色'，
},
图标按钮：{
颜色：暗白色，
},
};
},
组件willmount（）{
让newMuiTheme=this.state.muiTheme；
newMuiTheme.inkBar.backgroundColor=Colors.yellow200；
这是我的国家({
博物馆：新博物馆，
tabIndex:this.\u getSelectedIndex（）}）；
设setTabsState=function（）{
this.setState（{renderTabs:！（document.body.clientWidth您的根样式是固定的。它将导致元素粘在顶部。删除它。
您的根样式是固定的。它将导致元素粘在顶部。删除它。
好的，我在中找到了
paddingTop:spating.desktopKeylineIncrement+'px'，
，这是正确的解决方案

“导航”选项卡下的元素被覆盖的原因是，固定位置元素从文档流中删除，不占用任何空间。因此，这些元素从顶部开始，就好像页眉不在那里一样。您需要做的是使用填充或边距来占用页眉在以下情况下可能占用的空间：它是在正常的流程中。
好的，我在中找到了
paddingTop:spating.desktopKeylineIncrement+'px'，
，这是正确的解决方案

“导航”选项卡下的元素被覆盖的原因是，固定位置元素从文档流中删除，不占用任何空间。因此，这些元素从顶部开始，就好像页眉不在那里一样。您需要做的是使用填充或边距来占用页眉在以下情况下可能占用的空间：它处于正常流程中。
我希望它粘贴在顶部，而不是隐藏下面的元素。我希望它粘贴在顶部，而不是隐藏下面的元素。
import React from 'react';
import {
  AppCanvas,
  IconButton,
  EnhancedButton,
  Mixins,
  Styles,
  Tab,
  Tabs,
  Paper} from 'material-ui';

const {StylePropable} = Mixins;
const {Colors, Spacing, Typography} = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;


const Master = React.createClass({
  mixins: [StylePropable],

  getInitialState() {
    let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
    // To switch to RTL...
    // muiTheme.isRtl = true;
    return {
      muiTheme,
    };
  },

  propTypes: {
    children: React.PropTypes.node,
    history: React.PropTypes.object,
    location: React.PropTypes.object,
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  getStyles() {
    let darkWhite = Colors.darkWhite;
    return {
      footer: {
        backgroundColor: Colors.grey900,
        textAlign: 'center',
      },
      a: {
        color: darkWhite,
      },
      p: {
        margin: '0 auto',
        padding: 0,
        color: Colors.lightWhite,
        maxWidth: 335,
      },
      github: {
        position: 'fixed',
        right: Spacing.desktopGutter / 2,
        top: 8,
        zIndex: 5,
        color: 'white',
      },
      iconButton: {
        color: darkWhite,
      },
    };
  },

  componentWillMount() {
    let newMuiTheme = this.state.muiTheme;
    newMuiTheme.inkBar.backgroundColor = Colors.yellow200;
    this.setState({
      muiTheme: newMuiTheme,
      tabIndex: this._getSelectedIndex()});
    let setTabsState = function() {
      this.setState({renderTabs: !(document.body.clientWidth <= 647)});
    }.bind(this);
    setTabsState();
    window.onresize = setTabsState;
  },

  componentWillReceiveProps(nextProps, nextContext) {
    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
    this.setState({
      tabIndex: this._getSelectedIndex(),
      muiTheme: newMuiTheme,
    });
  },

  render() {
    let styles = this.getStyles();

    let githubButton = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}
        style={styles.github} />
    );

    let githubButton2 = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}/>
    );
    return (
      <AppCanvas>
        {githubButton}
        { this._getTabs() }

        {this.props.children}
      </AppCanvas>
    );
  },

  _getTabs() {
    let styles = {
      root: {
        backgroundColor: Colors.cyan500,
        position: 'fixed',
        height: 64,
        top: 0,
        right: 0,
        zIndex: 1101,
        width: '100%',
      },
      container: {
        position: 'absolute',
        right: (Spacing.desktopGutter / 2) + 48,
        bottom: 0,
      },
      span: {
        color: Colors.white,
        fontWeight: Typography.fontWeightLight,
        left: 45,
        top: 22,
        position: 'absolute',
        fontSize: 26,
      },
      svgLogoContainer: {
        position: 'fixed',
        width: 300,
        left: Spacing.desktopGutter,
      },
      svgLogo: {
        width: 65,
        backgroundColor: Colors.cyan500,
        position: 'absolute',
        top: 20,
      },
      tabs: {
        width: 425,
        bottom: 0,
      },
      tab: {
        height: 64,
      },
    };

    const materialIcon =
      <EnhancedButton
        style={styles.svgLogoContainer}
        linkButton={true}
        href="/#/home">
        <img style={this.prepareStyles(styles.svgLogo)} src="images/material-ui-logo.svg"/>
        <span style={this.prepareStyles(styles.span)}>material ui</span>
      </EnhancedButton>

    return (
      <div>
        <Paper
          zDepth={0}
          rounded={false}
          style={styles.root}>
          {materialIcon}
          <div style={this.prepareStyles(styles.container)}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}>
              <Tab
                value="1"
                label="GETTING STARTED"
                style={styles.tab}
                route="/get-started" />
              <Tab
                value="2"
                label="CUSTOMIZATION"
                style={styles.tab}
                route="/customization"/>
              <Tab
                value="3"
                label="COMPONENTS"
                style={styles.tab}
                route="/components"/>
            </Tabs>
          </div>
        </Paper>
      </div>
    );
  },

  _getSelectedIndex() {
    return this.props.history.isActive('/get-started') ? '1' :
      this.props.history.isActive('/customization') ? '2' :
        this.props.history.isActive('/components') ? '3' : '0';
  },

  _handleTabChange(value, e, tab) {
    this.props.history.pushState(null, tab.props.route);
    this.setState({tabIndex: this._getSelectedIndex()});
  },
});

export default Master;