制作侧边栏与材料的UI

我对做出正确的导航菜单像这样的学习材料UI http://www.material-ui.com/#/components/app-bar 制作侧边栏与材料的UI

我使用抽屉，使我的侧边栏，问题是当侧边栏切换时，它会隐藏右侧的内容。我希望当侧边栏切换时，它发生并将内容向右推，并且边栏和内容都有自己的滚动条。这里是我当前的代码：

Sidebar.js：

import React from 'react'; 
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import AppBar from 'material-ui/AppBar'; 

export default class Sidebar extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = {open: false}; 
    } 

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

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

    render() { 
     return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
       <div> 
        <RaisedButton 
         label="Open Drawer" 
         onTouchTap={this.handleToggle} 
        /> 
        <Drawer 
         containerStyle={{height: 'calc(100% - 64px)', top: 64}} 
         docked={true} 
         width={200} 
         open={this.state.open} 
         onRequestChange={(open) => this.setState({open}) 
         } 
        > 
         <AppBar title="AppBar" /> 
         <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem> 
         <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem> 
        </Drawer> 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
}

我Layout.js：

import React, { PropTypes } from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Layout.css'; 
import Header from '../Header'; 
import Feedback from '../Feedback'; 
import Footer from '../Footer'; 
import Sidebar from '../Sidebar'; 

import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import AppBar from 'material-ui/AppBar'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); 

function Layout({ children }) { 
    return (
    <div> 
     <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
      <AppBar title="My web" /> 
     </MuiThemeProvider> 

     <Sidebar/> 
     {React.Children.only(children)} 
     <Feedback /> 
     <Footer /> 
    </div> 
); 
} 

Layout.propTypes = { 
    children: PropTypes.element.isRequired, 
}; 

export default withStyles(s)(Layout);

来源

2016-10-05 methis

我也有同样的问题，我也想打开抽屉时，将内容推到右侧。 –

我发现这里有一个答案。 https://stackoverflow.com/questions/40620302/how-to-get-material-ui-drawer-to-squeeze-other-content-when-open/40640154#40640154 ----按Jeff McCloud –