左右移动内容以跟随抽屉打开/关闭（Material-UI）

Question

我的屏幕如下图所示：

AppBar 总是在 Drawer 和 Content 之上；这是通过使用 Drawer variant="persistent" 来实现的。

但是文本内容不会左右移动，它始终保持固定。如屏幕截图所示，我想让它可移动。

代码如下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

//NB: I'm using material-ui core/v3.9.3, and icons/v3.0.2
import AppBar from '@material-ui/core/AppBar';
import Drawer from '@material-ui/core/Drawer';
import MenuItem from '@material-ui/core/MenuItem';

import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

import MenuIcon from '@material-ui/icons/Menu';

import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

import { BrowserRouter, Route, Link } from 'react-router-dom'; 


const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
  },
  toolbar: theme.mixins.toolbar,
});



class App extends Component {

  constructor() {
    super();

    this.toggleDrawerOpenClose = this.toggleDrawerOpenClose.bind(this);
    this.handleClose  = this.handleClose.bind(this);

    this.state = {
      isDrawerOpen: false,
    }
  }


  //called from Hamburger
  toggleDrawerOpenClose(e) {
    e.preventDefault();

    this.setState({
      isDrawerOpen : !this.state.isDrawerOpen
    })
  }

  //called from MenuItems
  handleClose() { 
    this.setState({
      isDrawerOpen: false
    }); 
  }


  render() {
    const { classes } = this.props; //v.3

    return (
      <BrowserRouter>
      <div className={classes.root}>
              <CssBaseline />

              <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton edge="start" className={classes.menuButton} onClick={this.toggleDrawerOpenClose} color="inherit" aria-label="menu">
                      <MenuIcon  />
                    </IconButton>

                    <Typography variant="h6" className={classes.title} style={{ flex: 1 }}>
                      Test App
                    </Typography>

                    <Button color="inherit">Login</Button>

                  </Toolbar>
              </AppBar>

              {/* permanent, temporary, persistent */}
              <Drawer
                  className={classes.drawer}
                  variant="persistent"
                  classes={{
                    paper: classes.drawerPaper,
                  }}
                  open= {this.state.isDrawerOpen}
                  >

                  <div className={classes.toolbar} />

                  <MenuItem onClick={this.handleClose}>Menu Item 1</MenuItem>
                  <MenuItem onClick={this.handleClose}>Menu Item 2</MenuItem>
                  <MenuItem onClick={this.handleClose}>Menu Item 3</MenuItem>
              </Drawer>


              <main className={classes.content}>

                      <div className={classes.toolbar} />
                      <Typography paragraph>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                        etc...
                      </Typography>

                      <Typography paragraph>
                        Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
                        ... whatevs..
                      </Typography>
              </main>



      </div>
      </BrowserRouter>
    );

  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(App);

我的解决方案是使“constdrawerWidth = 240;”动态，即抽屉关闭时为 0，抽屉打开时为 240。怎么做？在render()方法中移动styles并不是那么简单，因为高阶组件export default withStyles(styles)(App)

注意：我使用的是 material-ui v3.9.3；您的回答应该说明它将适用于哪个版本，因为我发现很多示例都被破坏了。

Answer 1

您可以创建另一个 div 作为 'main' 的直接子级，并有条件地将其设置为 margin-left。
首先，在样式对象中创建两个新样式：

  shiftTextLeft: {
    marginLeft: '0px'
  },
  shiftTextRight: {
    marginLeft: drawerWidth,
  }

并在组件中添加 div：

      <main className={classes.content}>
        <div className={this.state.isDrawerOpen ? classes.shiftTextRight : classes.shiftTextLeft}>
              <div className={classes.toolbar} />
              <Typography paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                etc...
              </Typography>

              <Typography paragraph>
                Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
                ... whatevs..
              </Typography>
        </div>
      </main>

你可以参考这个CodeSandbox例子

使用的版本：

• 材料-ui：3.9.3
  
• material-ui-icons: 3.0.2
• 反应：16.9.0