Material-UI CardContent имеет нижний отступ в 3 пикселя
Убедитесь, что b находится в формате upperCase, например:
document.getElementById
___________________^
console.log(document.getElementById('test_1')); //Valid function
console.log(document.getElementbyId('test_2')); //Invalid function<span id="test_1">Test 1</span>
<br>
<span id="test_2">Test 2</span>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",
},
}
То, что заполнение внизу на самом деле вызвано стилем рамки-тени, связанным со свойством «возвышения» 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, показывающий это:
Вы также можете увидеть этот подход, используемый в этой демонстрации: