ContainerAPI

React Container 組件的 API 參考文檔。了解此導出模組的 props、CSS 和其他 API。

範例

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

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

原生組件的 Props 也可用。

名稱	類型	預設值	描述
classes	object	-	覆寫或擴展應用於組件的樣式。有關更多詳細資訊，請參閱下方的 CSS classes API。
component	elementType	-	用於根節點的組件。可以是字串 (用於 HTML 元素) 或組件。
disableGutters	bool	false	如果為 `true`，則會移除左右 padding (內距)。
fixed	bool	false	設定 max-width 以匹配目前斷點的 min-width。如果您偏好為一組固定的尺寸設計，而不是試圖適應完全流動的 viewport (視口)，這會很有用。預設為流動式。
maxWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false \| string	'lg'	決定 container 的 max-width。container 寬度會隨著螢幕尺寸增長。設定為 `false` 以停用 `maxWidth`。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及額外 CSS 樣式的系統 prop。有關更多詳細資訊，請參閱 `sx` 頁面。

`ref` 會傳遞到根元素。

您可以使用 MuiContainer，透過 theme 變更此組件的預設 props。

這些 class name 對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時應用於組件的 slots。

Class name	Rule name	描述
.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	應用於根元素的樣式。

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

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