React项目中如何对齐MaterialUI的CardContent与CardAction按钮？

以下是几种实用的解决方法，直接针对你遇到的对齐问题：

1. 用Bootstrap Flex布局重构右侧内容容器 #

给右侧的col-md-8添加Bootstrap的flex类，让内容垂直排列并自动分配空间，确保按钮区域和文本区域对齐：

<Card elevation={10} className="mb-3">
  <div className="row align-items-stretch">
    <div className="col-md-4">
      <CardMedia
        image={
          tourspot.images.length !== 0
            ? tourspot.images[0].url
            : "/src/assets/no-image.png"
        }
        title="Tourspot Image"
        component="img"
        className="img-fluid h-100 object-fit-cover"
      />
    </div>
    <div className="col-md-8 d-flex flex-column">
      {/* 让CardContent占满剩余空间 */}
      <CardContent className="flex-grow-1">
        <Typography gutterBottom variant="h5" component="div">
          {tourspot.title}
        </Typography>
        <Typography component="p" className="mb-3">
          {tourspot.description}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {tourspot.location}
        </Typography>
      </CardContent>
      {/* mt-auto 把按钮区域推到容器底部，保证和左侧图片高度对齐 */}
      <CardActions className="mt-auto">
        <Button variant="text" size="small">
          View Tourist Spot
        </Button>
      </CardActions>
    </div>
  </div>
</Card>

关键说明：

• row align-items-stretch：让左右两列高度完全一致
• col-md-8 d-flex flex-column：将右侧内容设为垂直flex容器
• flex-grow-1：让CardContent占满可用空间，文本区域正常展开
• h-100 object-fit-cover：让左侧图片充满列高度，避免因图片过短导致错位

2. 覆盖Material UI默认样式消除间距偏差 #

Material UI的CardContent和CardActions自带默认内边距，可能导致对齐错位，可通过自定义类或内联样式调整：

方法一：自定义CSS类 #

/* 全局样式或组件内样式 */
.custom-card-content {
  padding-bottom: 0 !important;
}
.custom-card-actions {
  padding-top: 0 !important;
}

在组件中引用：

<CardContent className="custom-card-content">
  {/* 文本内容 */}
</CardContent>
<CardActions className="custom-card-actions">
  {/* 按钮 */}
</CardActions>

方法二：内联样式直接调整 #

<CardContent style={{ paddingBottom: 0 }}>
  {/* 文本内容 */}
</CardContent>
<CardActions style={{ paddingTop: 0 }}>
  {/* 按钮 */}
</CardActions>

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