が、私はこの1つのように右のナビゲーションメニューを作成することにより、材料-UIを学んでいる材料-UI

でサイドバーを作りますサイドバーがトグルされると、右側のコンテンツが非表示になります。私はサイドバーがトグルされたときに、コンテンツが右に押し出され、サイドバーとコンテンツがそれぞれ独自のスクロールバーを持つようにしたい。ここに私の現在のコードは次のとおりです。が、私はこの1つのように右のナビゲーションメニューを作成することにより、材料-UIを学んでいる材料-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作成 –