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

SheetAPI

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

範例

Import

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

閱讀關於最小化 bundle size 的指南，以瞭解差異。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
childrennode-

元件的內容。

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

元件的顏色。它支援對此元件有意義的主題顏色。

若要瞭解如何新增自己的顏色，請查看主題元件—延伸色彩。

componentelementType-

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

invertedColorsboolfalse

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

slotProps{ root?: func
| object }		{}

用於每個內部 slot 的 props。

slots{ root?: elementType }{}

用於每個內部 slot 的元件。

請參閱下方的Slots API 以取得更多詳細資訊。

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

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

請參閱 `sx` 頁面以取得更多詳細資訊。

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

要使用的全域 variant。

若要瞭解如何新增自己的 variant，請查看主題元件—延伸 variant。

ref 會轉發到根元素。

主題預設 props

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

Slots

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

Slot 名稱類別名稱預設元件描述
root.MuiSheet-root'div'轉譯 root 的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiSheet-colorContextcolorContext當觸發顏色反轉時，套用至根元素的類別名稱。
.MuiSheet-colorDangercolorDanger若 color="danger"，套用至根元素的類別名稱。
.MuiSheet-colorNeutralcolorNeutral若 color="neutral"，套用至根元素的類別名稱。
.MuiSheet-colorPrimarycolorPrimary若 color="primary"，套用至根元素的類別名稱。
.MuiSheet-colorSuccesscolorSuccess若 color="success"，套用至根元素的類別名稱。
.MuiSheet-colorWarningcolorWarning若 color="warning"，套用至根元素的類別名稱。
.MuiSheet-variantOutlinedvariantOutlined若 variant="outlined"，套用至根元素的類別名稱。
.MuiSheet-variantPlainvariantPlain若 variant="plain"，套用至根元素的類別名稱。
.MuiSheet-variantSoftvariantSoft若 variant="soft"，套用至根元素的類別名稱。
.MuiSheet-variantSolidvariantSolid若 variant="solid"，套用至根元素的類別名稱。

您可以使用以下自訂選項之一覆寫元件的樣式

原始碼

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