ContainerAPI

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

示範

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

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

原生元件的 Props 也可用。

名稱	類型	預設值	描述
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以瞭解更多詳細資訊。
component	elementType	-	用於根節點的元件。可以是字串 (使用 HTML 元素) 或元件。
disableGutters	bool	false	若為 `true`，則會移除左右內邊距。
fixed	bool	false	設定最大寬度以符合目前斷點的最小寬度。如果您偏好為固定尺寸集設計，而不是嘗試容納完全流動的viewport，這會很有用。預設為流動式。
maxWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false \| string	'lg'	決定容器的最大寬度。容器寬度會隨著螢幕尺寸而增加。設定為 `false` 以停用 `maxWidth`。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。

ref 會轉發到根元素。

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

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

類別名稱	規則名稱	描述
.MuiContainer-disableGutters	disableGutters	若 `disableGutters={true}`，則套用至根元素的樣式。
.MuiContainer-fixed	fixed	若 `fixed={true}`，則套用至根元素的樣式。
.MuiContainer-maxWidthLg	maxWidthLg	若 `maxWidth="lg"`，則套用至根元素的樣式。
.MuiContainer-maxWidthMd	maxWidthMd	若 `maxWidth="md"`，則套用至根元素的樣式。
.MuiContainer-maxWidthSm	maxWidthSm	若 `maxWidth="sm"`，則套用至根元素的樣式。
.MuiContainer-maxWidthXl	maxWidthXl	若 `maxWidth="xl"`，則套用至根元素的樣式。
.MuiContainer-maxWidthXs	maxWidthXs	若 `maxWidth="xs"`，則套用至根元素的樣式。
.MuiContainer-root	root	套用至根元素的樣式。

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

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