Пользовательский интерфейс материала создает карту в реакции js

Question

Я новичок в пользовательском интерфейсе материала здесь, я пытаюсь создать карту, в которой будет нижний колонтитул карты и изображения.

Итак, на этой карте я пытаюсь, чтобы изображение было в центре, а также хочу добавить некоторые данные в нижний колонтитул, но нет нижний колонтитул для карты.

Может кто-нибудь помочь мне с этим

<Card className={css.root}>
  <CardContent>
    <CardMedia
      className={css.media}
      title="Contemplative Reptile"
      image={TestImage}
    />
    <Typography gutterBottom variant="h5" component="h2"></Typography>
    <Typography variant="body2" color="textSecondary" component="p"></Typography>
  </CardContent>
</Card>);
}

Answer 1

Следуйте этому шаблону, поместите ваш CardMedia блок за пределы CardContent и используйте component = "img" для выравнивания центра изображения на карте

<Card className={css.root}>
          <CardMedia
            component="img"
            className={css.media}
            title="Contemplative Reptile"
            image={TestImage}
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2"></Typography>
            <Typography variant="body2" color="textSecondary" component="p" ></Typography>
          </CardContent>
        </Card>