Typography（排版）API
React Typography 元件的 API 參考文件。瞭解這個匯出模組的 props、CSS 和其他 API。
示範
匯入
import Typography from '@mui/material/Typography';
// or
import { Typography } from '@mui/material';閱讀關於最小化套件大小的指南，以瞭解差異。
原生元件的 props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| align（對齊） | 'center' | 'inherit' | 'justify' | 'left' | 'right' | 'inherit' | 設定元件的 text-align 屬性。 |
| children（子節點） | node | - | 元件的內容。 |
| classes（類別） | object | - | 覆寫或擴展應用於元件的樣式。 請參閱下方CSS 類別 API 以瞭解更多詳細資訊。 |
| color（顏色） | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'textPrimary' | 'textSecondary' | 'textDisabled' | string | - | 元件的顏色。它同時支援預設和自訂主題顏色，自訂主題顏色可以按照調色盤客製化指南中所示的方式新增。 |
| component（元件） | elementType | - | 用於根節點的元件。可以是字串（使用 HTML 元素）或元件。 |
| gutterBottom（下方間距） | bool | false | 若 |
| noWrap（不換行） | bool | false | 若 |
| paragraph（段落） | bool | false | 若 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱`sx` 頁面以瞭解更多詳細資訊。 |
| variant（變體） | 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2' | string | 'body1' | 套用主題排版樣式。 |
| variantMapping（變體映射） | object | { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p', } | 元件將 variant prop 映射到一系列不同的 HTML 元素類型。例如，subtitle1 映射到 |
system 屬性。您可以將它們作為 props 直接用於元件上。ref 會轉發到根元素。主題預設 props
您可以使用 MuiTypography 透過主題變更此元件的預設 props。
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiTypography-alignCenter | alignCenter | 若 align="center"，則套用樣式至根元素。 |
| .MuiTypography-alignJustify | alignJustify | 若 align="justify"，則套用樣式至根元素。 |
| .MuiTypography-alignLeft | alignLeft | 若 align="left"，則套用樣式至根元素。 |
| .MuiTypography-alignRight | alignRight | 若 align="right"，則套用樣式至根元素。 |
| .MuiTypography-body1 | body1 | 若 variant="body1"，則套用樣式至根元素。 |
| .MuiTypography-body2 | body2 | 若 variant="body2"，則套用樣式至根元素。 |
| .MuiTypography-button | button | 若 variant="button"，則套用樣式至根元素。 |
| .MuiTypography-caption | caption | 若 variant="caption"，則套用樣式至根元素。 |
| .MuiTypography-gutterBottom | gutterBottom（下方間距） | 若 gutterBottom={true}，則套用樣式至根元素。 |
| .MuiTypography-h1 | h1 | 若 variant="h1"，則套用樣式至根元素。 |
| .MuiTypography-h2 | h2 | 若 variant="h2"，則套用樣式至根元素。 |
| .MuiTypography-h3 | h3 | 若 variant="h3"，則套用樣式至根元素。 |
| .MuiTypography-h4 | h4 | 若 variant="h4"，則套用樣式至根元素。 |
| .MuiTypography-h5 | h5 | 若 variant="h5"，則套用樣式至根元素。 |
| .MuiTypography-h6 | h6 | 若 variant="h6"，則套用樣式至根元素。 |
| .MuiTypography-inherit | inherit | 若 variant="inherit"，則套用樣式至根元素。 |
| .MuiTypography-noWrap | noWrap（不換行） | 若 nowrap={true}，則套用樣式至根元素。 |
| .MuiTypography-overline | overline | 若 variant="overline"，則套用樣式至根元素。 |
| .MuiTypography-paragraph | paragraph（段落） | 若 paragraph={true}，則套用樣式至根元素。 |
| .MuiTypography-root | root | 套用樣式至根元素。 |
| .MuiTypography-subtitle1 | subtitle1 | 若 variant="subtitle1"，則套用樣式至根元素。 |
| .MuiTypography-subtitle2 | subtitle2 | 若 variant="subtitle2"，則套用樣式至根元素。 |
您可以使用下列其中一種客製化選項來覆寫元件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中元件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。