居中的圖標和文本（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>