In "...src/Card/Card.js" you add 8px padding to the bottom of the Card component if no media was added and there is only text. While style-wise, it's nice to have this without having to worry about it. However there are inevitably going to be instances where one may require only text and none of the padding.
Wouldn't it be better to add this as a bool in the Card Properties so that we could decide if we want this or not? Additionally possibly adding another option to define a different value for paddingBottom: '8px'
add <CardText> anything </CardText> and simply don't include <CardMedia></CardMedia> to a card component.
The code in reference:
// If the last element is text or a title we should add 8px padding to the bottom of the card
const addBottomPadding = (lastElement && (lastElement.type.muiName === 'CardText' || lastElement.type.muiName === 'CardTitle'));
const mergedStyles = Object.assign({
zIndex: 1,
}, style);
const containerMergedStyles = Object.assign({
paddingBottom: addBottomPadding ? 8 : 0,
}, containerStyle);
-->
I find this very annoying as well. If I want paddingBottom to be 8px then I will add it myself. For anybody reading this in the future, the style can be overridden by passing <Card containerStyle={{ paddingBottom: 0 }}>.
We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.
Most helpful comment
I find this very annoying as well. If I want paddingBottom to be 8px then I will add it myself. For anybody reading this in the future, the style can be overridden by passing
<Card containerStyle={{ paddingBottom: 0 }}>.