StackAPI

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

示範

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

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

原生組件的屬性也可用。

名稱	類型	預設值	描述
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 會轉發到根元素。

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

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

類別名稱	規則名稱	描述
.MuiStack-root	root	套用至根元素的樣式。

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

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