跳到内容跳到内容

SnackbarAPI

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

演示

导入

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

要了解差异,请阅读关于最小化捆绑包大小的指南

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

签名: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
-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息,请参见`sx` 页面

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

要使用的全局 variant

要了解如何添加自己的 variant,请查看主题组件—扩展 variant

ref 被转发到根元素。

主题默认 props

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

Slots

要了解如何自定义 slot,请查看覆盖组件结构指南。

Slot 名称类名默认组件描述
root.MuiSnackbar-root'div'渲染根元素的组件。
startDecorator.MuiSnackbar-startDecorator'span'渲染 start decorator 的组件。
endDecorator.MuiSnackbar-endDecorator'span'渲染 end decorator 的组件。
clickAwayClickAwayListener渲染 click away 的组件。

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' }},则应用于根元素的样式。
.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",则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

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