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

Question

我正在开发 Mern-stack，我在前端使用 Material-UI。我的 GridList 工作正常，但我想在图像底部而不是图像前面显示我的描述文本。

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

    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

再见，问题是 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 您的 codesandbox 已修改。

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

How to add texts at the bottom of Material-UI GridList Image, in Reactjs

css

flexbox

reactjs

material-ui

codesandbox