More than 3 years have passed since last update.

Material-UIのCardContentのpadding-bottomを消す

Posted at 2020-11-12

##CardContentには初めからpadding-bottomが24px付いている
Material-UIのCardContentを使用したところ、元から適用されているらしきpadding-bottomがありました。

検証ツールでよく見ると

.MuiCardContent-root:last-child{
  padding-bottom: 24px;
  }

との記述が。
自分で書いてなくてもこのようなstyleが当たっているため、自分でstyleを当てても上手くいきません。
書いても消えない…賽の河原かな？

##これを消すために
このCardContentを使用しているところにこのように記述します。
※styled-components

const HogeCard = styled(CardContent)`
  &:last-child {
  padding-bottom: 0;
 } 
`

これで、無事にpadding-bottomを消すことができました。

ちなみに、padding-bottomだけでなく、paddingも16pxついているので、消したい場合はpadding: 0;
を入れてください。
last-childでpadding-bottomが付いていたため、ふつうにpadding: 0;をつけても消えなかった感じです。

参考：Material UI CardContent.js