Не могу удалить нижний отступ из содержимого карты в пользовательском интерфейсе материала

Question

При использовании компонента Card из Material UI кажется, что CardContent имеет нижний отступ 24px, который я не могу переопределить с помощью следующего кода. Я могу установить paddingLeft, Right и Top, используя этот метод, но по какой-то причине paddingBottom не будет работать.

const styles = theme => ({
  cardcontent: {
    paddingLeft: 0,
    paddingRight:0,
    paddingTop:0,
    paddingBottom: 0,
  },
})

А затем применить этот стиль:

<CardContent className={classes.cardcontent}></CardContent>

это то, что я вижу при предварительном просмотре элементов в браузере:

.MuiCardContent-root-158:last-child {
    padding-bottom: 24px;
}
.Component-cardcontent-153 {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

Я могу отредактировать пиксели в браузере до 0. Но я не могу понять, как нацелить MuiCardContent-root-158: last-child и переопределить paddingBottom в моем редакторе.

Answer 1

Вы хотите:

const styles = {
  cardcontent: {
    padding: 0,
    "&:last-child": {
      paddingBottom: 0
    }
  }
};

Если вы посмотрите на исходный код CardContent , вы можете найти, как он определяет стили:

export const styles = {
  /* Styles applied to the root element. */
  root: {
    padding: 16,
    '&:last-child': {
      paddingBottom: 24,
    },
  },
};

Это может помочь понять, как их переопределить.