居中图标和文本（React Material-UI）

Question

我对呈现带有图标和文本的 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>

Answer 1

您可以在辅助网格中添加容器，使图标和文本垂直对齐。

 <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>

居中图标和文本（React Material-UI）

Centered icon and text (React Material-UI)

reactjs

material-design

material-ui