跳到主要內容
🚀 影響 MUI Base 2025 年的開發藍圖！參與最新的開發者調查
+

Snackbar（訊息提示列）

Snackbar 元件會通知使用者應用程式已執行或將執行某個動作。

useSnackbar API

Import（引入）

import { useSnackbar } from '@mui/base/useSnackbar';
// or
import { useSnackbar } from '@mui/base';

請閱讀這份關於最小化套件大小的指南，以了解差異。

參數

名稱類型預設值描述
autoHideDurationnumber | nullnull

自動呼叫 onClose 函數前等待的毫秒數。onClose 應接著設定 open 屬性的狀態以隱藏 Snackbar。預設值為 null，此行為會停用。

disableWindowBlurListenerbooleanfalse

若為 true，即使視窗未取得焦點，autoHideDuration 計時器仍會到期。

onClose(event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void-

當元件請求關閉時觸發的回呼函數。通常 onClose 用於設定父元件中的狀態，該狀態用於控制 Snackbar 的 open 屬性。reason 參數可選擇性地用於控制對 onClose 的回應，例如忽略 clickaway。

openboolean-

若為 true，則會顯示元件。

resumeHideDurationnumber-

使用者互動後，等待多少毫秒才關閉。若未指定 autoHideDuration 屬性，則此屬性無作用。若有指定 autoHideDuration 屬性但未指定 resumeHideDuration，則預設為 autoHideDuration / 2 毫秒。

回傳值

名稱類型描述
getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSnackbarRootSlotProps<ExternalProps>

根插槽屬性的解析器。

onClickAway(event: React.SyntheticEvent<any> | Event) => void

偵測到「點擊外部」事件時觸發的回呼函數。