Центрированный значок и текст (React Material-UI) - PullRequest
Новая
       29

Центрированный значок и текст (React Material-UI)

0 голосов
/ 12 июля 2020

Меня интересует лучший способ представить React Material-UI со значком и текстом, чтобы все было выровнено по вертикали. Сейчас это не работает должным образом, особенно с условным рендерингом. 

               <Typography gutterBottom variant="subtitle2" component="h2" align="center">
                 <Grid container direction="row" alignItems="center" wrap="nowrap">
                    {p.numRooms > 0 && (
                      <Grid item xs={2} alignItems="center">
                        <HotelRoundedIcon color="secondary" />
                        {p.numRooms}
                      </Grid>
                    )}
                    {p.area > 0 && (
                      <Grid item xs={2}>
                        <AspectRatioRounded color="secondary" />
                        {p.area}
                      </Grid>
                    )}
                  </Grid>
                </Typography>

1 Ответ

1 голос
/ 12 июля 2020

Вы можете добавить контейнер во вторичные сетки, чтобы значки и текст были выровнены по вертикали. 

 <Typography gutterBottom variant="subtitle2" component="h2" align="center">
                 <Grid container direction="row" alignItems="center" wrap="nowrap">
                    {p.numRooms > 0 && (
                      <Grid item xs={2} container >
                        <HotelRoundedIcon color="secondary" />
                        {p.numRooms}
                      </Grid>
                    )}
                    {p.area > 0 && (
                      <Grid item xs={2} container>
                        <AspectRatioRounded color="secondary" />
                        {p.area}
                      </Grid>
                    )}
                  </Grid>
                </Typography>
...