跳到主要內容跳到主要內容

SnackbarAPI

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

示範

匯入

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

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

Props

原生元件的 Props 也可用。

名稱類型預設描述
actionnode-

要顯示的 action。它會在訊息之後、snackbar 的末端呈現。

anchorOrigin{ horizontal: 'center'
| 'left'
| 'right', vertical: 'bottom'
| 'top' }
{ vertical: 'bottom', horizontal: 'left' }

Snackbar 的錨點。在較小的螢幕上,元件會擴展以佔據所有可用寬度,水平對齊方式會被忽略。

autoHideDurationnumbernull

在自動呼叫 onClose 函數之前等待的毫秒數。onClose 應接著設定 open prop 的狀態以隱藏 Snackbar。預設情況下,此行為會以 null 值停用。

childrenelement-

取代 SnackbarContent 元件。

classesobject-

覆寫或擴展應用於元件的樣式。

請參閱下方的CSS 類別 API 以了解更多詳細資訊。

ClickAwayListenerPropsobject-

應用於 ClickAwayListener 元件的 Props。

ContentPropsobject-

應用於 SnackbarContent 元件的 Props。

disableWindowBlurListenerboolfalse

如果為 true,即使視窗未聚焦,autoHideDuration 計時器仍會過期。

keyany-

當使用單一父元素渲染的 <Snackbar/> 顯示多個連續的 snackbar 時,請新增 key prop 以確保每個訊息都得到獨立處理。例如,使用 <Snackbar key={message} />。否則,訊息可能會在原地更新,並且 autoHideDuration 等功能可能會受到影響。

messagenode-

要顯示的訊息。

onClosefunc-

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

簽名:function(event: React.SyntheticEvent<any> | Event, reason: string) => void</any>
  • event 回呼函數的事件來源。
  • reason 可以是:"timeout" (autoHideDuration 過期)、"clickaway""escapeKeyDown"
openbool-

如果為 true,則顯示元件。

resumeHideDurationnumber-

在使用者互動後關閉之前等待的毫秒數。如果未指定 autoHideDuration prop,則不會執行任何操作。如果指定了 autoHideDuration prop 但未指定 resumeHideDuration,則預設為 autoHideDuration / 2 毫秒。

slotProps{ clickAwayListener?: func
| { children: element, disableReactTree?: bool, mouseEvent?: 'onClick'
| 'onMouseDown'
| 'onMouseUp'
| 'onPointerDown'
| 'onPointerUp'
| false, onClickAway?: func, touchEvent?: 'onTouchEnd'
| 'onTouchStart'
| false }, content?: func
| object, root?: func
| object, transition?: func
| object }
{}

用於每個 slot 內部的 props。

slots{ clickAwayListener?: elementType, content?: elementType, root?: elementType, transition?: elementType }{}

用於每個 slot 內部的元件。

sxArray<func
| object
| bool>
| func
| object
-

系統 prop,允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 sx 頁面以了解更多詳細資訊。

TransitionComponentelementTypeGrow

用於轉場效果的元件。請參閱此指南以了解關於此元件需求的更多資訊。

transitionDurationnumber
| { appear?: number, enter?: number, exit?: number }
{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }

轉場效果的持續時間,以毫秒為單位。您可以為所有轉場效果指定單一逾時,或使用物件個別指定。

TransitionPropsobject{}

應用於轉場效果元件的 Props。預設情況下,元件基於此 Transition 元件。

ref 會轉發到根元素。

主題預設 props

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

Slots

Slot 名稱類別名稱預設元件描述
root.MuiSnackbar-root'div'渲染 root slot 的元件。
contentSnackbarContent渲染 content slot 的元件。
clickAwayListenerClickAwayListener渲染 clickAwayListener slot 的元件。
transitionGrow渲染轉場效果的元件。請參閱此指南以了解關於此元件需求的更多資訊。

CSS 類別

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

類別名稱規則名稱描述
.MuiSnackbar-anchorOriginBottomCenteranchorOriginBottomCenter如果 anchorOrigin={{ 'bottom', 'center' }},則應用於根元素的樣式。
.MuiSnackbar-anchorOriginBottomLeftanchorOriginBottomLeft如果 anchorOrigin={{ 'bottom', 'left' }},則應用於根元素的樣式。
.MuiSnackbar-anchorOriginBottomRightanchorOriginBottomRight如果 anchorOrigin={{ 'bottom', 'right' }},則應用於根元素的樣式。
.MuiSnackbar-anchorOriginTopCenteranchorOriginTopCenter如果 anchorOrigin={{ 'top', 'center' }},則應用於根元素的樣式。
.MuiSnackbar-anchorOriginTopLeftanchorOriginTopLeft如果 anchorOrigin={{ 'top', 'left' }},則應用於根元素的樣式。
.MuiSnackbar-anchorOriginTopRightanchorOriginTopRight如果 anchorOrigin={{ 'top', 'right' }},則應用於根元素的樣式。

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

原始碼

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