для начала скажу, что я совершенно новичок в разработке React и front-end в целом.Я пытаюсь собрать простой веб-интерфейс с использованием React и пытаюсь разобраться во всем.У меня проблема с тем, что мое содержимое (на скриншоте, отображаемое как «Lorem») слишком далеко от ящика слева.При проверке через Dev Tools отображается, что есть какой-то «невидимый» блок.Я предполагаю, что я делаю что-то не так с тем, как я использую сетку макета 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>
);
}
}