StackAPI

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

示範

如需此 React 組件的使用範例和詳細資訊，請造訪組件示範頁面

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

也提供原生組件的屬性。

名稱	類型	預設	描述
children	node	-	組件的內容。
component	elementType	-	用於根節點的組件。可以是字串 (使用 HTML 元素) 或組件。
direction	'column-reverse' \| 'column' \| 'row-reverse' \| 'row' \| Array<'column-reverse' \| 'column' \| 'row-reverse' \| 'row'> \| object	'column'	定義 `flex-direction` 樣式屬性。它適用於所有螢幕尺寸。
divider	node	-	在每個子元素之間新增一個元素。
spacing	Array<number \| string> \| number \| object \| string	0	定義直接子元素之間的間距。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。
useFlexGap	bool	false	如果 `true`，則會使用 CSS flexbox `gap`，而不是對子元素應用 `margin`。雖然 CSS `gap` 消除了已知的限制，但在某些瀏覽器中尚未完全支援。我們建議在使用此標記之前，先查看 https://caniuse.dev.org.tw/?search=flex%20gap。若要全域啟用此標記，請依照主題的預設屬性設定。

作為 CSS 工具程式，Stack 組件也支援所有 system 屬性。您可以直接在組件上將它們用作屬性。

ref 會轉發到根元素。

您可以使用 JoyStack 透過主題變更此組件的預設屬性。

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

插槽名稱	類別名稱	預設組件	描述
root	.MuiStack-root	`'div'`	渲染根元素的組件。

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