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

DialogTitleAPI

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

範例

導入

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

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

Props

也提供原生組件的 Props。

名稱類型預設描述
childrennode-

如果未設定 src，則用於在 DialogTitle 內呈現圖示或文字元素。這可以是元素，或僅僅是字串。

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

組件的顏色。它支援此組件適用的主題顏色。

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

componentelementType-

用於 root 節點的組件。字串 (用於 HTML 元素) 或組件。

level'body-lg'
| 'body-md'
| 'body-sm'
| 'body-xs'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'inherit'
| 'title-lg'
| 'title-md'
| 'title-sm'		{ sm: 'title-md', md: 'title-lg', lg: 'h4' }

套用主題排版樣式。

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'		-

要使用的全域 variant。

若要了解如何新增自己的 variant，請查看主題組件 — 擴充 variant。

`ref` 會轉發到 root 元素。

主題預設 props

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

Slots

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

Slot 名稱類別名稱預設組件描述
root.MuiDialogTitle-root'div'呈現 root 的組件。

CSS 類別

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

類別名稱規則名稱描述
.MuiDialogTitle-body-lgbody-lg如果 level="body-lg"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-body-mdbody-md如果 level="body-md"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-body-smbody-sm如果 level="body-sm"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-body-xsbody-xs如果 level="body-xs"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-colorContextcolorContext當觸發色彩反轉時，套用至 root 元素的類別名稱。
.MuiDialogTitle-colorDangercolorDanger如果 color="danger"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-colorNeutralcolorNeutral如果 color="neutral"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-colorPrimarycolorPrimary如果 color="primary"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-colorSuccesscolorSuccess如果 color="success"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-colorWarningcolorWarning如果 color="warning"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-h1h1如果 level="h1"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-h2h2如果 level="h2"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-h3h3如果 level="h3"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-h4h4如果 level="h4"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-title-lgtitle-lg如果 level="title-lg"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-title-mdtitle-md如果 level="title-md"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-title-smtitle-sm如果 level="title-sm"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-variantPlainvariantPlain如果 variant="plain"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-variantSoftvariantSoft如果 variant="soft"，則套用至 root 元素的類別名稱。
.MuiDialogTitle-variantSolidvariantSolid如果 variant="solid"，則套用至 root 元素的類別名稱。

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

原始碼

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