CardActionAreaAPI

React CardActionArea 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

import CardActionArea from '@mui/material/CardActionArea';
// or
import { CardActionArea } from '@mui/material';

ButtonBase 元件的 props 也可使用。

名稱類型描述

children

名稱	類型	描述
children	node	元件的內容。
classes	object	覆寫或擴充套用至元件的樣式。請參閱下方的 CSS 類別 API 以瞭解更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。

node

元件的內容。

classes

object

覆寫或擴充套用至元件的樣式。

請參閱下方的 CSS 類別 API 以瞭解更多詳細資訊。

Array<func
| object
| bool>
| func
| object

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面以瞭解更多詳細資訊。

ref 會轉發到根元素。

雖然上方未明確記載，但 ButtonBase 元件的 props 也可在 CardActionArea 中使用。您可以利用此優勢來鎖定巢狀元件。

您可以使用 MuiCardActionArea 透過主題變更此元件的預設 props。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

類別名稱	規則名稱	描述
.Mui-focusVisible		如果動作區域是鍵盤焦點，則套用至 ButtonBase 根元素的狀態類別。
.MuiCardActionArea-focusHighlight	focusHighlight	當動作區域是鍵盤焦點時，套用至覆蓋動作區域的覆蓋層的樣式。
.MuiCardActionArea-root	root	套用至根元素的樣式。

您可以使用下列其中一種客製化選項來覆寫元件的樣式

如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。