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

TypographyAPI

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

範例

Import

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

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

Props

也提供原生元件的 Props。

名稱類型預設值描述
childrennode-

元件的內容。

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

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

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

componentelementType-

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

endDecoratornode-

放置在 children 之後的元素。

gutterBottomboolfalse

若為 true，文字底部將有邊界。

level'h1'
| 'h2'
| 'h3'
| 'h4'
| 'title-lg'
| 'title-md'
| 'title-sm'
| 'body-lg'
| 'body-md'
| 'body-sm'
| 'body-xs'
| 'inherit'
| string		'body-md'

套用主題排版樣式。

levelMappingobject{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', 'title-lg': 'p', 'title-md': 'p', 'title-sm': 'p', 'body-lg': 'p', 'body-md': 'p', 'body-sm': 'p', 'body-xs': 'span', inherit: 'p', }

此元件將 variant prop 對應到一系列不同的 HTML 元素類型。例如，body1 對應到 <h6>。如果您想要變更該對應，您可以提供自己的對應。或者，您可以使用 component prop。

noWrapboolfalse

若為 true，文字將不會換行，而是會截斷並以文字溢位省略符號顯示。
請注意，文字溢位只會發生在區塊或行內區塊層級元素上（元素需要有寬度才能溢位）。

slotProps{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }		{}

用於每個內部 slot 的 props。

slots{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }{}

用於每個內部 slot 的元件。

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

startDecoratornode-

放置在 children 之前的元素。

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

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

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

textColorany-

系統顏色。

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

要使用的全域 variant。

若要瞭解如何新增您自己的 variants，請查看主題元件 — 擴展 variants。

作為 CSS 公用程式，Typography 元件也支援所有system 屬性。您可以將它們作為 props 直接用於元件上。

ref 轉發到根元素。

主題預設 props

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

Slots

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

Slot 名稱Class 名稱預設元件描述
root.MuiTypography-root'a'呈現 root 的元件。
startDecorator.MuiTypography-startDecorator'span'呈現 start decorator 的元件。
endDecorator.MuiTypography-endDecorator'span'呈現 end decorator 的元件。

CSS 類別

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

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

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

原始碼

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