如何在 Reactjs 中的 Material-UI GridList Image 底部添加文本

Question

我正在开发一个 Mern 堆栈，并且在我的前端使用 Material-UI。我的 GridList 工作正常，但我希望我的描述文本位于图像底部而不是图像前面。

当我在底部添加不显示的文本时，图像会覆盖它。如何在图片下方/底部添加文字？

    import axios from "axios";
    import React, { useState, useEffect } from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import GridList from "@material-ui/core/GridList";
    import GridListTile from "@material-ui/core/GridListTile";
    import GridListTileBar from "@material-ui/core/GridListTileBar";
    import ListSubheader from "@material-ui/core/ListSubheader";
    import IconButton from "@material-ui/core/IconButton";
    import InfoIcon from "@material-ui/icons/Info";
    import { Link } from "react-router-dom";
    import useMediaQuery from "@material-ui/core/useMediaQuery";
    import { useTheme } from "@material-ui/core/styles";
    import Typography from "@material-ui/core/Typography";

    export default function Program() {
      const theme = useTheme();
      const [programData, setProgramData] = useState([]);

      const useStyles = makeStyles((theme) => ({
        root: {
         display: "flex",
         flexWrap: "wrap",
         justifyContent: "space-around",
         overflow: "hidden",
         backgroundColor: theme.palette.background.paper,
       },
       gridList: {
         width: 1100,
       },
       icon: {
         color: "rgba(255, 255, 255, 0.54)",
       },
     }));
     useEffect(() => {
       axios
       .get("http://localhost:9000/programs")
        .then((response) => {
         setProgramData([...response.data]);
        })
        .catch(function (error) {
         console.log(error);
        });
    }, []);

    const matches = useMediaQuery(theme.breakpoints.down("xs"));
    const classes = useStyles();

    return (
      <div className={classes.root}>
        <GridListTile key="Subheader" style={{ height: "auto" }}></GridListTile>
        <GridList
          cellHeight={390}
          cols={matches ? 1 : 2}
          className={classes.gridList}
          spacing={8}
        >
          {programData.length > 0 &&
            programData.map((tile, index) => {
              return (
                GridListTile
                  key={Math.floor(Math.random() * new Date().getTime())}
                >
                  <img src={tile.programImage} alt={tile.title} />
                  <GridListTileBar titlePosition="top" title={tile.title} />
                  <Typography paragraph>
                    browned, 6 to 8 minutes. Transfer shrimp to a large plate and
                    set aside, leaving chicken and chorizo in the pan. Add
                    pimentón, bay leaves, garlic, tomatoes, onion, salt and
                    pepper, and cook, stirring often until thickened and fragrant,
                    about 10 minutes. Add saffron broth and remaining 4 1/2 cups
                    chicken broth; bring to a boil.
                  </Typography>
                </GridListTile>
              );
            })}
        </GridList>
      </div>
     );
    }

谢谢

Answer 1

Ciao，问题是img 的高度设置为默认为 100%。所以只需要减少img 的高度。在您的情况下，您可以执行以下操作：

<img
   src={tile.programImage}
   alt={tile.title}
   class={classes.image}
/>

在你的useStyles:

const useStyles = makeStyles((theme) => ({
    ...
    image: {
      height: "63%" //63% for example
    }
}));

Here你的密码箱已修改。