0

首先，我会说我对 React 和前端开发完全陌生。我正在尝试使用 React 组合一个简单的 Web UI，并尝试在进行过程中解决问题。我有一个问题，我的内容（在屏幕截图中显示为“Lorem”）离左侧的抽屉太远了。通过开发工具检查时，它显示存在某种“不可见”块。我的猜测是我在使用 flexbox 布局网格的方式上做错了。我很感激能帮助我理解我哪里出错了，以及我是如何滥用 flexbox 的。

UI 问题预览 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>
    );
  }
}
4

1 回答 1

0

非常愚蠢的错误——我用了两次“//评论”，这就是创建这些“不可见的块”。删除这些后，现在一切都很好！

于 2019-04-12T20:29:08.397 回答