在material ui卡片中将页脚与底部对齐(内部示例)

import React from 'react';
import { Card, CardContent, CardActions, Typography, Box } from '@mui/material';

const MyCard = () => {
  return (
    <Card sx={{ display: 'flex', flexDirection: 'column' }}>
      <CardContent>
        <Typography variant="h5" component="div">
          Card Title
        </Typography>
        <Typography variant="body2" color="text.secondary">
          This is the main content of the card.
        </Typography>
      </CardContent>
      <Box sx={{ flexGrow: 1 }} />
      <CardActions>
        <Typography variant="body2">Card Footer Content</Typography>
      </CardActions>
    </Card>
  );
};

export default MyCard;