如何使用 Material-UI 在 React 中垂直对齐卡片中的按钮？

Question

我已经使用 material-ui 在 ReactJS 中制作了 3 张卡，所以我面临的问题是第一张卡的段落很小，而第二张和第三张卡的段落有点大，所以当我放置按钮时，Z4757FE07FD462A8DBEDE0 的按钮都不同3 张卡片，因此每个段落按钮未正确对齐在垂直中心。

我附上了我面临的问题的图片。 [1]： https://i.stack.imgur.com/ZkGVc.jpg

这是 CodeSandBox 链接：-https://codesandbox.io/s/vigilant-sanderson-yp491?fontsize=14&hidenavigation=1&theme=dark

下面是我的 ReactJS 和 material-ui 代码

const Room = ({room}) => {
    const classes = useStyles() ;
    return (
    <Card className={classes.root}className={classes.cards}>
        <CardMedia className={classes.media} image={room.image} title={room.name}/>
        <CardContent>
                  <div className={classes.CardContent}>
                      <h2>{room.name}</h2>     
                <Typography>
                    {room.description}
                </Typography>
                 </div>
                 <Button variant="outlined" color="primary" justify="space-around">
                Primary
            </Button>
                  </CardContent> 
                  <CardActions disableSpacing className={classes.CardActions}>
                  </CardActions>

    </Card>
    )
}

样式.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
    media: {
    height: 280,
  },
  cards:{
    height:600
  },
  cardContent: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  cardActions: {
    justifyContent: 'space-between',
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
  },
  h5:{
    fontfamily: 'Ubuntu',
  },

}));

如何在保持段落大小相同的同时将每张卡片中的这些按钮垂直居中对齐？

Answer 1

正如评论中提到的，如果我很好地理解你想要实现的目标，一种可能的解决方案是让描述具有固定的高度。 然后，您可以为其添加滚动条，因此按钮将对齐。 或者，您可以使用“显示更多”按钮来扩展内容，而不是滚动条。

我已经使用浏览器本机滚动条的示例更新了 codepen - codepen

为了增强解决方案，您可以考虑使用纤薄的滚动条解决方案，例如react-perfect-scrollbar