web-dev-qa-db-ja.com

マテリアルUIのカードコンテンツからパディング下部を削除できない

Material UIからCardコンポーネントを使用すると、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をオーバーライドする方法がわかりません。

javascriptcssreactjsmaterial-uijss
6
Alexander

！重要な追加、それはルートCSSをオーバーライドします

0
frank edekobi

テーマのオーバーライドを介してカードコンテンツのパディングを0に設定すると、以下がうまく機能します。

overrides: {
  MuiCardContent: {
    root: {
      padding: 0,
      "&:last-child": {
        paddingBottom: 0,
     },
    },
  },
},
0
jhthompson