AppBarAPI

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

示範

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

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

Paper 元件的 props 也可使用。

名稱	類型	預設值	描述
children	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS classes API 以取得更多詳細資訊。
color	'default' \| 'inherit' \| 'primary' \| 'secondary' \| 'transparent' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	元件的色彩。它同時支援預設和自訂主題色彩，可以如調色盤自訂指南中所示新增。
enableColorOnDark	bool	false	若為 true，則 `color` prop 會套用在深色模式中。
position	'absolute' \| 'fixed' \| 'relative' \| 'static' \| 'sticky'	'fixed'	定位類型。不同選項的行為在 MDN web docs 中說明。注意：`sticky` 並非普遍支援，在無法使用時將會回退為 `static`。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，可讓您定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。

ref 會轉發到根元素。

雖然上方未明確記錄，但 Paper 元件的 props 也可在 AppBar 中使用。您可以利用此優勢來鎖定巢狀元件。

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

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

類別名稱	規則名稱	描述
.MuiAppBar-colorDefault	colorDefault	若 `color="default"`，則套用至根元素的樣式。
.MuiAppBar-colorError	colorError	若 `color="error"`，則套用至根元素的樣式。
.MuiAppBar-colorInfo	colorInfo	若 `color="info"`，則套用至根元素的樣式。
.MuiAppBar-colorInherit	colorInherit	若 `color="inherit"`，則套用至根元素的樣式。
.MuiAppBar-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的樣式。
.MuiAppBar-colorSecondary	colorSecondary	若 `color="secondary"`，則套用至根元素的樣式。
.MuiAppBar-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的樣式。
.MuiAppBar-colorTransparent	colorTransparent	若 `color="transparent"`，則套用至根元素的樣式。
.MuiAppBar-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的樣式。
.MuiAppBar-positionAbsolute	positionAbsolute	若 `position="absolute"`，則套用至根元素的樣式。
.MuiAppBar-positionFixed	positionFixed	若 `position="fixed"`，則套用至根元素的樣式。
.MuiAppBar-positionRelative	positionRelative	若 `position="relative"`，則套用至根元素的樣式。
.MuiAppBar-positionStatic	positionStatic	若 `position="static"`，則套用至根元素的樣式。
.MuiAppBar-positionSticky	positionSticky	若 `position="sticky"`，則套用至根元素的樣式。
.MuiAppBar-root	root	套用至根元素的樣式。

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

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