SnackbarAPI
React Snackbar 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import Snackbar from '@mui/material/Snackbar';
// or
import { Snackbar } from '@mui/material';
請閱讀這份關於最小化 bundle 大小的指南,以了解差異。
原生元件的 Props 也可用。
名稱 | 類型 | 預設 | 描述 |
---|---|---|---|
action | node | - | 要顯示的 action。它會在訊息之後、snackbar 的末端呈現。 |
anchorOrigin | { horizontal: 'center' | 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'bottom', horizontal: 'left' } | Snackbar 的錨點。在較小的螢幕上,元件會擴展以佔據所有可用寬度,水平對齊方式會被忽略。 |
autoHideDuration | number | null | 在自動呼叫 |
children | element | - | 取代 |
classes | object | - | 覆寫或擴展應用於元件的樣式。 請參閱下方的CSS 類別 API 以了解更多詳細資訊。 |
ClickAwayListenerProps | object | - | 應用於 |
ContentProps | object | - | 應用於 |
disableWindowBlurListener | bool | false | 如果為 |
key | any | - | 當使用單一父元素渲染的 |
message | node | - | 要顯示的訊息。 |
onClose | func | - | 當元件請求關閉時觸發的回呼函數。通常 簽名: function(event: React.SyntheticEvent<any> | Event, reason: string) => void</any>
|
open | bool | - | 如果為 |
resumeHideDuration | number | - | 在使用者互動後關閉之前等待的毫秒數。如果未指定 |
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 內部的元件。 |
sx | Array<func | object | bool> | func | object | - | 系統 prop,允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 |
TransitionComponent | elementType | Grow | 用於轉場效果的元件。請參閱此指南以了解關於此元件需求的更多資訊。 |
transitionDuration | number | { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, } | 轉場效果的持續時間,以毫秒為單位。您可以為所有轉場效果指定單一逾時,或使用物件個別指定。 |
TransitionProps | object | {} | 應用於轉場效果元件的 Props。預設情況下,元件基於此 |
ref
會轉發到根元素。主題預設 props
您可以使用 MuiSnackbar
透過主題變更此元件的預設 props。
Slot 名稱 | 類別名稱 | 預設元件 | 描述 |
---|---|---|---|
root | .MuiSnackbar-root | 'div' | 渲染 root slot 的元件。 |
content | SnackbarContent | 渲染 content slot 的元件。 | |
clickAwayListener | ClickAwayListener | 渲染 clickAwayListener slot 的元件。 | |
transition | Grow | 渲染轉場效果的元件。請參閱此指南以了解關於此元件需求的更多資訊。 |
這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時應用於元件的 slot。
類別名稱 | 規則名稱 | 描述 |
---|---|---|
.MuiSnackbar-anchorOriginBottomCenter | anchorOriginBottomCenter | 如果 anchorOrigin={{ 'bottom', 'center' }} ,則應用於根元素的樣式。 |
.MuiSnackbar-anchorOriginBottomLeft | anchorOriginBottomLeft | 如果 anchorOrigin={{ 'bottom', 'left' }} ,則應用於根元素的樣式。 |
.MuiSnackbar-anchorOriginBottomRight | anchorOriginBottomRight | 如果 anchorOrigin={{ 'bottom', 'right' }} ,則應用於根元素的樣式。 |
.MuiSnackbar-anchorOriginTopCenter | anchorOriginTopCenter | 如果 anchorOrigin={{ 'top', 'center' }} ,則應用於根元素的樣式。 |
.MuiSnackbar-anchorOriginTopLeft | anchorOriginTopLeft | 如果 anchorOrigin={{ 'top', 'left' }} ,則應用於根元素的樣式。 |
.MuiSnackbar-anchorOriginTopRight | anchorOriginTopRight | 如果 anchorOrigin={{ 'top', 'right' }} ,則應用於根元素的樣式。 |
您可以使用以下其中一種自訂選項來覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中,使用規則名稱作為元件的
styleOverrides
屬性的一部分。
原始碼
如果您在此頁面中找不到資訊,請考慮查看元件的實作程式碼以取得更多詳細資訊。