javascript - 素材UI卡根据输入变化

Question

我已经使用了材料 ui 卡，当我显示它时。它如下图所示。当卡片不适合下面的页面并且所有卡片尺寸必须相同时，我想这样展示我的卡片。我怎样才能做到这一点？

这是我的代码：

const useStyles = makeStyles({ // Styling for my cards
  root: {
    width: 255,// i changed that line and below line but nothing happened
  },
  media: {
    height: 190,
  },
});

export default function AlbumsCard() {
  const classes = useStyles();
 ..... //Some http requests
  return (
    <div>
      <div>
        <input
          style={{
            width: 500,
            "margin-left": "auto",
            "margin-right": "auto",
            "margin-top": "10px",
          }}
          type="text"
          placeholder="Search Album"
          onChange={handleChange}
          value={input}
        />
      </div>
      <div style={{ display: "flex" }}> //cardss
        {k.map((album) => (
          <Link
            to={`/albums/${album.album_id}`}
            style={{ textDecoration: "none", color: "#15cdfc" }}
          >
            <Card style={{ margin: "10px" }} className={classes.root}>
              <CardActionArea>
                <CardMedia
                  className={classes.media}
                  image={album.album_pfp}
                  title={album.album_name}
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {album.album_name}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    component="p"
                  >
                    {album.album_song_count}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}

还有来自我的应用程序的图像：

你可以在上面看到。排成一行的所有卡片和一些卡片的高度不同。还有一个滚动条。

我想显示整个卡片的大小相同，并且当它溢出页面时。它在下面。

---

更新后的版本：

现在每张卡都有不同的尺寸，我该如何解决？我认为这是从图像大小。

标签： javascripthtmlcssreactjs