Material-UI CardContent имеет нижний отступ в 3 пикселя

Question

Примечание: я уже рассматривал этот вопрос: Не удается удалить нижнюю часть отступа из содержимого карты в пользовательском интерфейсе материала

Но принятый ответ не решил мою проблему.

Я использую Библиотеку реакции пользовательского интерфейса материала, пытаясь воссоздать следующее изображение:

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

Вот мой код:

<Card className={classes.card}>
  <CardActionArea containerStyle={{ paddingBottom: 0 }}>
    <CardMedia
      className={classes.media}
      title="Contemplative Reptile"
      image="none"
    >
      <div className={classes.heading}>
        <AccessAlarmIcon className={classes.icon}/> 
        <Typography className={classes.mainText} variant="h5" component="h2">Delayed</Typography>
        <Typography className={classes.subText} variant="subtitle1" component="h5">9:30pm Departure</Typography>
      </div>        
    </CardMedia>
    <CardContent className={classes.content}>
      <img className={classes.mainPic} src="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"></img>
    </CardContent>
  </CardActionArea>
</Card>

С этими стилями:

const styles = {
  card: {
    maxWidth: 300,
  },
  media: {
    height: 60,
    backgroundColor: "#FF1547",
    padding: 16
  },
  icon: {
    color: "white",
    fontSize: 25,
    marginRight: 10
  },
  mainText: {
    color: "white",
    display: "inline-block",
    position: "relative",
    top: -3
  },
  subText: {
    color: "white",
    marginLeft: 36,
  },
  heading: {
    padding: 0
  },
  mainPic: {
    width: 300,
    height: 200,
    marginBottom: 0,
    padding: 0
  },
  content: {
    padding: "0 !important",
    '&:last-child': {
      paddingBottom: "0 !important",
    },
  }
};

Вот как это выглядит при рендеринге:

Обратите внимание на нижнюю прокладку.Инструменты разработчика Chrome показывают нижний отступ в 3 пикселя под таблицей стилей агента пользователя.Я импортировал CSS Reset, который не помог.

Опять же, я уверен, что мои стили и JSX могли бы быть лучше, но эффективность, оптимизация и элегантность не были моей заботой.

Спасибо, Джейми

Answer 1

То, что заполнение внизу на самом деле вызвано стилем рамки-тени, связанным со свойством "elevation" Paper (на котором основан Card).Установка высоты в 0 избавляет от этого:

<Card className={classes.card} elevation={0}>

Однако это также избавляет от выпуклого вида карты.Правильный способ справиться с этим - указать изображение в элементе CardMedia, а не использовать отдельный тег img внутри элемента CardContent.

<CardMedia
          className={classes.mainPic}
          image="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"
        />

Вот код CodeSandbox, показывающий это:

Вы также можете увидеть этот подход, используемый в этой демонстрации:

https://material -ui.com / demos /карты / # UI-контроль

Answer 2

Посмотрите, хотите ли вы этого. Я изменил mainPic и content. Этот синтаксис containerStyle={{ paddingBottom: 0 }} кажется неправильным даже при получении предупреждения в браузере. Может быть, вы хотите изменить style или classes={{root}} API CardActionArea.

mainPic: {
  width: 300,
  marginBottom: 0,
  padding: 0,
  borderRadius: '0 0 4px 4px',

},
content: {
  height: 225,
  padding: "0 !important",
  '&:last-child': {
    paddingBottom: "0 !important",
  },
}