CardActionAreaとCardActionAreaの違いが公式ドキュメントでは分からなかったので生成されるHTML単位で違いを比較してみた。
CardActionArea
https://material-ui.com/api/card-action-area/
CardAction
https://material-ui.com/api/card-actions/
今回比較するコードは以下の２つ。
Cardが入っているけど今更変更するもの面倒なのでこのまま続けます
card.tsx
<Card>
<CardActionArea>カードアクションエリア</CardActionArea>
<CardActions>カードアクション</CardActions>
</Card>
生成されたのが以下のコード
card.html
<div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded">
<button class="MuiButtonBase-root MuiCardActionArea-root" tabindex="0" type="button">
カードアクションエリア
<span class="MuiCardActionArea-focusHighlight"></span>
<span class="MuiTouchRipple-root"></span>
</button>
<div class="MuiCardActions-root MuiCardActions-spacing">
カードアクション
</div>
</div>
CardActionAreaにはcssが適用されていないがCardActionにはflexが適用されていた。
card.css
.MuiCardActions-root {
display: flex;
padding: 8px;
align-items: center;
}
使い分
CardActionArea
CardActionAreaは単体としてイベントを登録する。
CardAction
CardActionはButtonを複数用意するなど子要素で自由にカスタマイズ可能。
以上。
↧