SnackbarAPI

React Snackbar 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

Snackbar

导入

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
action	node	-	要显示的操作。它在消息之后、snackbar 的末尾呈现。
anchorOrigin	{ horizontal: 'center' \| 'left' \| 'right', vertical: 'bottom' \| 'top' }	{ vertical: 'bottom', horizontal: 'left' }	`Snackbar` 的锚点。在较小的屏幕上，组件会增长以占据所有可用宽度，水平对齐方式将被忽略。
autoHideDuration	number	null	在自动调用 `onClose` 函数之前等待的毫秒数。然后 `onClose` 应该设置 `open` prop 的状态以隐藏 Snackbar。默认情况下，此行为通过 `null` 值禁用。
children	element	-	替换 `SnackbarContent` 组件。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS 类 API。
ClickAwayListenerProps	object	-	应用于 `ClickAwayListener` 元素的 Props。已弃用－请改用 `slotProps.clickAwayListener`。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
ContentProps	object	-	应用于 `SnackbarContent` 元素的 Props。已弃用－请改用 `slotProps.content`。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
disableWindowBlurListener	bool	false	如果为 `true`，即使窗口未聚焦，`autoHideDuration` 定时器也将过期。
key	any	-	当使用单个父级渲染的 `<Snackbar/>` 显示多个连续的 snackbar 时，添加 `key` prop 以确保每个消息的独立处理。例如，使用 `<Snackbar key={message} />`。否则，消息可能会在原位置更新，并且像 `autoHideDuration` 这样的功能可能会受到影响。
message	node	-	要显示的消息。
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 }, content?: func \| object, root?: func \| object, transition?: func \| object }	{}	用于每个内部插槽的 props。
slots	{ clickAwayListener?: elementType, content?: elementType, root?: elementType, transition?: elementType }	{}	用于每个内部插槽的组件。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅`sx` 页面。
TransitionComponent	elementType	Grow	用于过渡的组件。请遵循本指南以了解有关此组件要求的更多信息。已弃用－请改用 `slots.transition`。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
transitionDuration	number \| { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }	过渡的持续时间，以毫秒为单位。您可以为所有过渡指定单个超时，也可以使用对象单独指定。
TransitionProps	object	{}	应用于过渡元素的 Props。默认情况下，该元素基于此 `Transition` 组件。已弃用－请改用 `slotProps.transition`。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiSnackbar 通过主题更改此组件的默认 props。

插槽

插槽名称	类名	默认组件	描述
root	.MuiSnackbar-root	`'div'`	渲染 root 插槽的组件。
content		`SnackbarContent`	渲染 content 插槽的组件。
clickAwayListener		`ClickAwayListener`	渲染 clickAwayListener 插槽的组件。
transition		`Grow`	渲染 transition 的组件。请遵循本指南以了解有关此组件要求的更多信息。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名	规则名称	描述
.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 属性的一部分。

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。