在Reactjs中如何在Material-UI GridList图像底部添加文本

import React from 'react';
import { GridList, GridListTile, GridListTileBar } from '@material-ui/core';

class ImageGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        {
          img: 'image-url-1.jpg',
          title: 'Image 1',
          subtitle: 'Description 1'
        },
        {
          img: 'image-url-2.jpg',
          title: 'Image 2',
          subtitle: 'Description 2'
        },
        // 添加更多图像和文本...
      ]
    };
  }
  
  render() {
    return (
      <GridList cols={3}>
        {this.state.images.map((image) => (
          <GridListTile key={image.title}>
            <img src={image.img} alt={image.title} />
            <GridListTileBar
              title={image.title}
              subtitle={image.subtitle}
            />
          </GridListTile>
        ))}
      </GridList>
    );
  }
}