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

【问题标题】：Centered icon and text (React Material-UI)居中的图标和文本（React Material-UI）
【发布时间】：2020-07-12 05:11:47
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui material-design

【解决方案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>

【讨论】：

你太棒了！添加此标签实际上有什么作用？它确实有效......
根据文档：这基本上将您的 Grid 组件转换为 flex 或 inline-flex。 material-ui.com/components/grid。然后你可以使用'justify'水平改变项目和'alignItems'垂直改变它们。