如何使用Material UI实现图标与两行文本的对齐布局

问题解决方案 #

你的核心问题是内层Grid未启用容器特性，导致子元素无法并排排列。将<Grid item xs={12} direction="row">修改为<Grid item container xs={12} direction="row">即可解决：

• 加上container属性后，这个Grid同时具备容器和子项的双重身份：作为容器时，它能通过direction: row控制子元素横向排列；作为子项时，它占据外层Grid的全部12列宽度。
• 另外注意：Material UI没有h7这个Typography变体，建议改用body2替代。

修正后的核心代码片段：

import { Grid, Stack, Typography } from "@mui/material";

export default function App() {
  return (
    <>
      <Grid container>
        <Grid item container xs={12} direction="row">
          <Stack sx={{ width: "25%" }}>
            <Typography>Icon</Typography>
          </Stack>
          <Stack
            sx={{
              borderBottom: 1,
              borderColor: "grey.500",
              alignItems: "center",
              width: "75%",
              direction: "column"
            }}
          >
            <Typography variant="h5">My-Title</Typography>
            <Typography variant="body2" sx={{ fontStyle: "italic" }}>
              My-Subtitle
            </Typography>
          </Stack>
        </Grid>
      </Grid>
    </>
  );
}

Grid、Box、Stack组件的适用场景 #

• Grid：专门用于响应式网格布局，基于CSS Flexbox/Grid实现。适合需要按列/行划分页面区域、适配不同屏幕尺寸的场景。核心属性：container（启用容器模式，可布局子元素）、item（作为容器的子项）、xs/sm/md/lg/xl（不同断点下的列宽占比）、direction（子元素排列方向）。
• Stack：用于快速实现线性布局（垂直/水平），是Flexbox的简化封装。适合按钮组、文本行这类简单的元素排列场景。核心属性：direction、spacing（元素间距）、alignItems/justifyContent。注意：Stack不支持Grid的断点列宽属性（如xs），需通过width或sx控制尺寸。
• Box：通用容器组件，相当于增强版的<div>。适合自定义样式、封装组件，所有CSS属性都能通过sx传递。当Grid和Stack满足不了精细化样式需求时，用Box兜底。

布局问题调试方法 #

• 明确组件角色：Grid要布局子元素必须加container属性，仅item属性的Grid只能作为容器的子项，无法控制内部排列；
• 核对属性有效性：每个组件的属性是专属的，比如Stack不能用xs，Grid的direction只有在container模式下才生效；
• 用浏览器DevTools排查：查看元素的CSS样式，检查display、flex-direction、width等属性是否符合预期，定位样式冲突或未生效的属性；
• 简化代码定位问题：逐步移除非核心的组件或样式，比如先去掉Stack直接用Grid item测试，排查是组件嵌套还是样式导致的布局异常。

内容的提问来源于stack exchange，提问作者NRS2000