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

SnackbarAPI

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

範例

匯入

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

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

Props

名稱類型預設值描述
open*bool-

如果為 true，則顯示組件。

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

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

animationDurationnumber300

動畫的持續時間，以毫秒為單位。此值用於控制動畫完成一個週期所需的時間長度。它也用於延遲組件的卸載。如果您有自己的動畫，請提供此值，以便我們可以精確地計時組件的卸載以匹配您的自訂動畫。

autoHideDurationnumbernull

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

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'		'neutral'

組件的顏色。它支援適用於此組件的那些主題顏色。

若要了解如何新增自己的顏色，請查看主題組件—擴展顏色。

componentelementType-

用於根節點的組件。可以是字串（用於 HTML 元素）或組件。

disableWindowBlurListenerboolfalse

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

endDecoratornode-

放置在子元素之後的元素。

invertedColorsboolfalse

如果為 true，具有隱含 color prop 的子元素會反轉其顏色，以符合組件的 variant 和 color。

keyany-

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

onClosefunc-

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

Signature:function(event: React.SyntheticEvent<any> | Event, reason: string) => void
  • event 回呼事件的來源。
  • reason 可以是："timeout" (autoHideDuration 過期)、"clickaway" 或 "escapeKeyDown"。
onUnmountfunc-

組件即將卸載時觸發的回呼函數。

resumeHideDurationnumber-

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

size'sm'
| 'md'
| 'lg'		'md'

組件的大小。

若要了解如何向組件新增自訂大小，請查看主題組件—擴展尺寸。

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

用於內部每個 slot 的 props。

slots{ clickAway?: elementType, endDecorator?: elementType, root?: elementType, startDecorator?: elementType }{}

用於內部每個 slot 的組件。

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

startDecoratornode-

放置在子元素之前的元素。

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

系統 prop，允許定義系統覆寫以及其他 CSS 樣式。

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

variant'outlined'
| 'plain'
| 'soft'
| 'solid'		'outlined'

要使用的全域 variant。

若要了解如何新增自己的 variant，請查看主題組件—擴展變體。

ref 會轉發到根元素。

主題預設 props

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

Slots

若要了解如何自訂 slot，請查看覆寫組件結構指南。

插槽名稱類別名稱預設組件描述
root.MuiSnackbar-root'div'渲染根元素的組件。
startDecorator.MuiSnackbar-startDecorator'span'渲染開始裝飾器的組件。
endDecorator.MuiSnackbar-endDecorator'span'渲染結束裝飾器的組件。
clickAwayClickAwayListener渲染點擊外部區域的組件。

CSS 類別

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

類別名稱規則名稱描述
.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' }}，則應用於根元素的樣式。
.MuiSnackbar-colorDangercolorDanger如果 color="danger"，則應用於根元素的類別名稱。
.MuiSnackbar-colorNeutralcolorNeutral如果 color="neutral"，則應用於根元素的類別名稱。
.MuiSnackbar-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的類別名稱。
.MuiSnackbar-colorSuccesscolorSuccess如果 color="success"，則應用於根元素的類別名稱。
.MuiSnackbar-colorWarningcolorWarning如果 color="warning"，則應用於根元素的類別名稱。
.MuiSnackbar-sizeLgsizeLg如果 size="lg"，則應用於根元素的類別名稱。
.MuiSnackbar-sizeMdsizeMd如果 size="md"，則應用於根元素的類別名稱。
.MuiSnackbar-sizeSmsizeSm如果 size="sm"，則應用於根元素的類別名稱。
.MuiSnackbar-variantOutlinedvariantOutlined如果 variant="outlined"，則應用於根元素的類別名稱。
.MuiSnackbar-variantPlainvariantPlain如果 variant="plain"，則應用於根元素的類別名稱。
.MuiSnackbar-variantSoftvariantSoft如果 variant="soft"，則應用於根元素的類別名稱。
.MuiSnackbar-variantSolidvariantSolid如果 variant="solid"，則應用於根元素的類別名稱。

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

原始碼

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