Пользовательский интерфейс материала: сочетание flexInd alignItems с flexGrow - PullRequest
Новая
       10

Пользовательский интерфейс материала: сочетание flexInd alignItems с flexGrow

0 голосов
/ 15 декабря 2018

Я использую flexGrow для правильного выравнивания кнопок AppBar, аналогично примерам, показанным в документации (https://material -ui.com / demos / app-bar / ).

Однако я также испытываю ту же проблему, показанную в этом другом вопросе SO, когда записи типографии разного размера выравниваются на разных вертикальных уровнях ( Пользовательский интерфейс материала: поместите пробел между двумя компонентами типографии )

Однако, если я реализую решение <div style={{ display: "flex", alignItems: 'flex-end' }}> из другого вопроса SO, то flexGrow перестанет действовать, и кнопка окажется рядом с текстом, как вы можете видеть на примере изображения:

Bad example

Сняв <div style={{ display: "flex", alignItems: 'flex-end' }}>, кнопка расположена правильно, но меньший текст не:

good example

Мой код выглядит так: 

 <div style={flexGrowTest}>
      <AppBar>
         <Toolbar>
        <MuiThemeProvider theme={itsCustomTheme}>
        <div style={{ display: "flex", alignItems: 'flex-end' }}> // if this is removed, the button alighment is OK, but the small text appears in the middle vertically 
        <Typography variant="h2" color="inherit">
            {pageTitle}
        </Typography>
        <Typography variant="h5" color="inherit" style={flexGrowTest}>
            {pageSubtitle}
        </Typography>
        </div>
        </MuiThemeProvider>
        <IconButton color="inherit" disabled={this.state.disableIconButton}>
            <Badge badgeContent={this.state.selectedImagesCount} color="secondary" invisible={this.state.hideDownloadBadge}>
            <SaveAlt />
            </Badge>
         </IconButton>
         </Toolbar>
      </AppBar>
    </div>
...