跳转到内容
编辑此页面

Unstyled snackbar

The SnackbarUnstyled component informs users that an action has been or will be performed by the app.

Introduction

A snackbar provides users with a brief, temporary message about app processes without interrupting their activity or experience.

The SnackbarUnstyled component is built to appear on-screen to inform users about an action that the app is taking.

Component

Usage

After installation, you can start building with this component using the following basic elements:

import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';

export default function MyApp() {
  return <SnackbarUnstyled>{/* snackbar text */}</SnackbarUnstyled>;
}

Basics

SnackbarUnstyled doesn't impose any restrictions on its implementation—it's up to you to design it so that it doesn't interrupt the user experience, and disappears after a set amount of time without requiring the user to take action.

Use the autoHideDuration prop to set the time (in milliseconds) that the snackbar remains on the screen.

The following demo illustrates the basic usage of SnackbarUnstyled. Click Open snackbar to see how it behaves:

Anatomy

The SnackbarUnstyled component is composed of a single root <div> slot with no interior slots:

<div role="presentation" className="BaseSnackbar-root">snackbar content</div>

Slot props

Use the component prop to override the root slot with a custom element:

<SnackbarUnstyled component="span" />

Use the components prop to override any interior slots in addition to the root:

<SnackbarUnstyled components={{ Root: 'span' }} />

Use the componentsProps prop to pass custom props to internal slots. The following code snippet applies a CSS class called my-snackbar to the root slot:

<SnackbarUnstyled componentsProps={{ root: { className: 'my-snackbar' } }} />

Hook

import { useSnackbar } from '@mui/base/SnackbarUnstyled';

The useSnackbar hook lets you apply the functionality of SnackbarUnstyled to a fully custom component.

It returns props to be placed on the custom component, along with fields representing the component's internal state.

Hooks do not support slot props, but they do support customization props.

If you use a ClickAwayListener to let the user close the snackbar by clicking outside of it, make sure to pass the onClickAway handler returned by this hook to the ClickAwayListener.

Pass the open state to the hook and use it to show and hide the snackbar.

The demo below shows how to build a fully custom component with the useSnackbar hook that also incorporates the ClickAwayListener component:

Customization

Transitions

You can animate the open and close states of the snackbar with a render prop child and a transition component, as long as the component meets these conditions:

  • Is a direct child descendent of the snackbar
  • Has an in prop—this corresponds to the open state
  • Passes the exited prop to SnackbarUnstyled
  • Calls the onEnter callback prop when the enter transition starts—sets exited to false
  • Calls the onExited callback prop when the exit transition is completed—sets exited to true

These two callbacks allow the snackbar to unmount the child content when closed and keep it fully transitioned. This is only applicable if you are using transition components using react-transition-group library internally.

The demo below shows how to create a snackbar with custom transitions:

API