Snackbar

Snackbar 组件用于告知用户应用已执行或将要执行的操作。

Snackbar API

导入

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

阅读本指南，了解有关最小化包大小的差异。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
autoHideDuration	number	null	在自动调用 `onClose` 函数之前等待的毫秒数。然后 `onClose` 应该设置 `open` prop 的状态以隐藏 Snackbar。默认情况下，此行为被禁用，值为 `null`。
disableWindowBlurListener	bool	false	如果为 `true`，即使窗口未聚焦，`autoHideDuration` 计时器也会过期。
exited	bool	true	用于处理退出过渡和卸载组件的 prop。
onClose	func	-	当组件请求关闭时触发的回调。通常 `onClose` 用于在父组件中设置状态，该状态用于控制 `Snackbar` `open` prop。`reason` 参数可以选择性地用于控制对 `onClose` 的响应，例如忽略 `clickaway`。签名：`function(event: React.SyntheticEvent<any> \| Event, reason: string) => void<any>` `event` 回调的事件源。 `reason` 可以是：`"timeout"`（`autoHideDuration` 过期）、`"clickaway"` 或 `"escapeKeyDown"`。
open	bool	-	如果为 `true`，则显示组件。
resumeHideDuration	number	-	用户交互后在关闭之前等待的毫秒数。如果未指定 `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 }, root?: func \| object }	{}	用于 Snackbar 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 Snackbar 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	Class 名称	默认组件	描述
root	.base-Snackbar-root	`'div'`	渲染根元素的组件。