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

DividerAPI

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

示範

Import

import Divider from '@mui/material/Divider';
// or
import { Divider } from '@mui/material';

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

Props

原生元件的 props 也可使用。

名稱類型預設值描述
absoluteboolfalse

絕對定位元素。

childrennode-

元件的內容。

classesobject-

覆寫或擴充應用於元件的樣式。

請參閱下方CSS 類別 API 以取得更多詳細資訊。

componentelementType-

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

flexItemboolfalse

若為 true，垂直分隔線在彈性容器中使用時將具有正確的高度。（預設情況下，若垂直分隔線是彈性容器的子項目，則其計算高度將為 0px。）

lightboolfalse

若為 true，分隔線將具有較淡的顏色。

orientation'horizontal'
| 'vertical'		'horizontal'

元件方向。

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

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

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

textAlign'center'
| 'left'
| 'right'		'center'

文字對齊方式。

variant'fullWidth'
| 'inset'
| 'middle'
| string		'fullWidth'

要使用的變體。

ref 轉發到根元素。

主題預設 props

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

CSS 類別

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

類別名稱規則名稱描述
.MuiDivider-absoluteabsolute若 absolute={true}，則應用於根元素的樣式。
.MuiDivider-flexItemflexItem若 flexItem={true}，則應用於根元素的樣式。
.MuiDivider-fullWidthfullWidth若 variant="fullWidth"，則應用於根元素的樣式。
.MuiDivider-insetinset若 variant="inset"，則應用於根元素的樣式。
.MuiDivider-lightlight若 light={true}，則應用於根元素的樣式。
.MuiDivider-middlemiddle若 variant="middle"，則應用於根元素的樣式。
.MuiDivider-rootroot應用於根元素的樣式。
.MuiDivider-textAlignLefttextAlignLeft若 textAlign="left" orientation="horizontal"，則應用於根元素的樣式。
.MuiDivider-textAlignRighttextAlignRight若 textAlign="right" orientation="horizontal"，則應用於根元素的樣式。
.MuiDivider-verticalvertical若 orientation="vertical"，則應用於根元素的樣式。
.MuiDivider-withChildrenwithChildren若分隔線有文字，則應用於根元素的樣式。
.MuiDivider-withChildrenVerticalwithChildrenVertical若分隔線有文字且 orientation="vertical"，則應用於根元素的樣式。
.MuiDivider-wrapperwrapper若 orientation="horizontal"，則應用於 span children 元素的樣式。
.MuiDivider-wrapperVerticalwrapperVertical若 orientation="vertical"，則應用於 span children 元素的樣式。

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

原始碼

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