Reactjs 将物料UI选项卡与抽屉进行交互

我在使用React和Material UI打开的选项卡中打开抽屉时遇到问题。我可以打开抽屉，但它显示在第一个标签上。起初我认为我构建组件的方式有问题，所以我在WebpackBin中做了一个非常简单的组件，它也做了同样的事情

以前有人能弄明白这一点吗？如何在tab viewer中打开抽屉？我可以很好地处理对话框，但不能处理选项卡

下面是一个示例代码

class sidebarDrawer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return (
             <div>                
                 <p>My sidebar content</p>
             </div>
        );
    }
}

class TabComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           slideIndex: 0,
           open: false,
        };
    }

    handleChange = (value) => {
        this.setState({
            slideIndex: value,
        });
    };

    handleToggle = () => this.setState({open: !this.state.open});

    handleClose = () => this.setState({open: false});

    render() {
        let materialUITheme;
        return (
            <MuiThemeProvider muiTheme={getMuiTheme()}>
               <div>
                  <Tabs
                      onChange={this.handleChange}
                      value={this.state.slideIndex}>
                      <Tab label="Tab One" value={0} />
                      <Tab label="Tab Two" value={1} />
                  </Tabs>
                  <SwipeableViews
                      index={this.state.slideIndex}
                      onChangeIndex={this.handleChange}>
                      <div>
                          <h2 style={styles.headline}>Tabs with slide effect</h2>
                          Swipe to see the next slide.<br />
                      </div>
                      <div style={styles.slide}>
                          <div>
                              <RaisedButton
                                  label="Open Drawer"
                                  onClick={this.handleToggle}
                              />
                              <Drawer
                                  docked={false}
                                  width={200}
                                  open={this.state.open}
                                  onRequestChange={(open) => this.setState({open})}
                              >
                                  <AppBar
                                      title="Playlists"
                                      onRightIconButtonTouchTap={this.handleClose}
                                      showMenuIconButton={false}/>
                                  <sidebarDrawer />
                              </Drawer>
                           </div>  
                       </div>
                   </SwipeableViews>
                </div>
            </MuiThemeProvider>
         );
     }
}

class sidebarDrawer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
我的边栏内容

);
}
}
类TabComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片索引：0，
开：错，
};
}
handleChange=（值）=>{
这是我的国家({
幻灯片索引：值，
});
};
handleToggle=（）=>this.setState（{open:！this.state.open}）；
handleClose=（）=>this.setState（{open:false}）；
render（）{
让物质成为现实；
返回(
具有滑动效果的选项卡
滑动以查看下一张幻灯片。

this.setState（{open}）}
>
供您使用。转到第二个选项卡。单击按钮。返回第一个选项卡，您将看到抽屉在那里打开

提前感谢各位。
这可能是一种很不礼貌的方式，但很有效

将样式
位置：'relative'
添加到选项卡

覆盖

工作
这是一个很好的可能性。一旦我测试了它，我会回到这个问题上来。谢谢。它是有效的。我希望它不是基于css的，但重要的是它能起作用，对吗？
containerStyle={{ position: 'absolute' }}  // default is 'fixed'
overlayStyle={{ position: 'absolute' }}