Блог

для начала скажу, что я совершенно новичок в React и интерфейсной разработке в целом. Я пытаюсь собрать простой веб-интерфейс с помощью React и пытаюсь разобраться по ходу дела. У меня проблема, когда мой контент (на скриншоте отображается как «Lorem») находится слишком далеко от ящика слева. При проверке с помощью инструментов разработчика отображается, что есть какой-то «невидимый» блок. Я предполагаю, что я делаю что-то не так с тем, как я использую сетку макета flexbox. Я был бы признателен за помощь, чтобы понять, где я ошибаюсь и как я неправильно использовал flexbox.

Предварительный просмотр проблемы с пользовательским интерфейсом http://prntscr.com/nb74pc

Я пытался поиграть с сеткой flexbox, изменив параметры flexGrow, flexShrink, однако безуспешно.

Мой код выглядит следующим образом

 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>
    );
  }
}
  

Очень глупая ошибка — я дважды использовал «// comment», и это создавало эти «невидимые блоки». Теперь все в порядке после их удаления!