跳到主要內容跳到主要內容
🚀 影響 Joy UI 2025 年的開發藍圖！參與最新的開發者調查

卡片API

React 卡片元件的 API 參考文件。了解這個匯出模組的 props、CSS 和其他 API。

範例

匯入

import Card from '@mui/joy/Card';
// or
import { Card } from '@mui/joy';

閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props

原生元件的 Props 也可用。

名稱類型預設描述
childrennode-

用於在未設定 src 時，在卡片內呈現圖示或文字元素。這可以是元素，或僅僅是字串。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的那些主題顏色。

若要了解如何新增自己的顏色，請查看主題元件 — 擴展顏色。

componentelementType-

用於根節點的元件。可以是字串以使用 HTML 元素或元件。

invertedColorsboolfalse

若為 true，則具有隱含 color prop 的子元件會反轉其顏色，以符合元件的 variant 和 color。

orientation'horizontal'
| 'vertical'		'vertical'

元件方向。

size'lg'
| 'md'
| 'sm'
| string		'md'

元件的尺寸。它接受 'sm' 到 'lg' 之間的主題值。

若要了解如何將自訂尺寸新增至元件，請查看主題元件 — 擴展尺寸。

slotProps{ root?: func
| object }		{}

用於每個插槽內部的 props。

slots{ root?: elementType }{}

用於每個插槽內部的元件。

請參閱下方的插槽 API 以了解更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

允許定義系統覆寫以及其他 CSS 樣式的系統 prop。

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

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'outlined'

要使用的全域變體。

若要了解如何新增自己的變體，請查看主題元件 — 擴展變體。

ref 會轉發到根元素。

主題預設 Props

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

插槽

若要了解如何自訂插槽，請查看覆寫元件結構指南。

插槽名稱類別名稱預設元件描述
root.MuiCard-root'div'呈現根的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiCard-colorContextcolorContext當觸發顏色反轉時，套用至根元素的類別名稱。
.MuiCard-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiCard-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiCard-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiCard-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiCard-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiCard-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的類別名稱。
.MuiCard-sizeLgsizeLg如果 size="lg"，則套用至根元素的類別名稱。
.MuiCard-sizeMdsizeMd如果 size="md"，則套用至根元素的類別名稱。
.MuiCard-sizeSmsizeSm如果 size="sm"，則套用至根元素的類別名稱。
.MuiCard-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的類別名稱。
.MuiCard-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的類別名稱。
.MuiCard-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的類別名稱。
.MuiCard-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的類別名稱。
.MuiCard-verticalvertical如果 orientation="vertical"，則套用至根元素的類別名稱。

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

原始碼

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