製作側邊欄與材料的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 –