DividerAPI

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

示範

有關此 React 組件用法的範例和詳細資訊，請訪問組件示範頁面

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

原生組件的 Props 也可用。

名稱	類型	預設值	描述
children	node	-	組件的內容。
component	elementType	-	用於根節點的組件。可以是字串（使用 HTML 元素）或組件。
inset	'none' \| 'context' \| string	-	應用於分隔線的類別名稱，以根據方向縮小或拉伸線條。
orientation	'horizontal' \| 'vertical'	'horizontal'	組件方向。
slotProps	{ root?: func \| object }	{}	用於內部每個 slot 的 props。
slots	{ root?: elementType }	{}	用於內部每個 slot 的組件。請參閱下方的Slots API 以了解更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以了解更多詳細資訊。

ref 被轉發到根元素。

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

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

Slot 名稱	類別名稱	預設組件	描述
root	.MuiDivider-root	`'hr'`	呈現 root 的組件。

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

類別名稱	規則名稱	描述
.MuiDivider-horizontal	horizontal	如果 `orientation="horizontal"`，則應用於根元素的類別名稱。
.MuiDivider-insetContext	insetContext	如果 `inset="context"`，則應用於根元素的類別名稱。
.MuiDivider-insetNone	insetNone	如果 `inset="none"`，則應用於根元素的類別名稱。
.MuiDivider-vertical	vertical	如果 `orientation="vertical"`，則應用於根元素的類別名稱。

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

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