Question

首先，我会说我对React和前端开发是全新的。我正在尝试使用React构建一个简单的Web UI，并尝试解决问题。我的内容（在显示为“ Lorem”的屏幕截图中）的内容离左侧的抽屉太远了，这是一个问题。通过开发工具进行检查时，它显示存在某种“不可见”的块。我的猜测是我在使用flexbox布局网格时做错了什么。我很感谢您的帮助，以了解我要去哪里出错以及如何滥用Flexbox。

UI issue preview http://prntscr.com/nb74pc

我尝试通过更改flexGrow，flexShrink参数来使用flexbox网格，但是没有运气。

我的代码如下

const styles = theme => ({
  root: {
    display: 'flex',
  },
  grow: {
    flexGrow: 1,
  },
  appBar: {
    width: `calc(100% - ${drawerWidth}px)`,
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  toolbar: theme.mixins.toolbar,
  drawerInfo: {
    width: drawerWidth,
    flexDirection: 'column',
    align: 'left',
  },
  main: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
  },
});

class Main extends React.Component {
  render() {
    const { classes } = this.props
    return (
      <div className={classes.root}>
        <CssBaseline />
        // Application bar component
        <AppBar
          className={classes.appBar}
          position="fixed">
          <Toolbar>
            <Typography
              className={classes.grow}
              variant="h6"
              color="inherit"
              noWrap
            >
              {pageName}
            </Typography>
            <LoginDialog />
          </Toolbar>
        </AppBar>

        // Application side menu
        <Drawer
          className={classes.drawer}
          variant="permanent"
          anchor="left"
          classes={{
            paper: classes.drawerPaper,
          }}>
          <Toolbar>
            <div className={classes.drawerInfo}>
              <Typography
                variant="button"
                component="h3">
                Grade Calculator
              </Typography>
              <Typography
                variant="caption"
                component="p">
                Version: 1.0.0
              </Typography>
            </div>
          </Toolbar>
          <Divider />
          <MenuItem>
            <Typography
              variant="body2">
              {pageName}
            </Typography>
          </MenuItem>
        </Drawer>
        <main className={classes.main}>
          <div className={classes.toolbar} />
          <Typography
            variant="title">
            Lorem
          </Typography>
        </main>
      </div>
    );
  }
}

Answer 1

一个非常愚蠢的错误-我两次使用“ // comment”，这是在创建这些“看不见的块”。删除这些文件后一切正常！

为什么我的主要内容离左边那么远？

1 个答案: