[Material UI]CardActionAreaとCardActionの違い

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を複数用意するなど子要素で自由にカスタマイズ可能。

以上。