如何让 Material-UI CardActions 始终贴在父级底部

Question

第二个 Material-UI 卡片的蓝色 CardActions 部分没有停留在底部，这使得页面看起来不简洁。

我已经尝试将 CardContent 的高度设置为 100%，但没有任何改变。

我创建了一个沙箱来说明问题：

我希望 Material-UI CardAction 始终位于容器的底部，无论 CardContent 中有多少项。

Answer 1

您必须将以下属性添加到 .MuiCard-root

.MuiCard-root{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Other Method is :

.MuiCard-root{
  display: flex;
  flex-direction: column;
}
.MuiCardActions-root{
   margin-top: auto;
}

Answer 2

我遇到了同样的问题，接受的答案部分解决了问题，但肯定让我走上了正轨。该解决方案的问题是其他卡组件会移动。就我而言，由于中间有空格，标题和卡片顶部的图像之间有一个空格。

所以在卡根上我做了：

<Card sx={{ 
    height: "100%",
    display: "flex",
    flexDirection: "column",
  }}>

然后在 CardActions 上我做了：

<CardActions disableSpacing sx={{ mt: "auto" }}>