Snackbar

Support displaying information when performing an action.


import { useSnackbar } from 'src/components/snackbar';
import { Button } from '@mui/material';
 
function App() {
  const { enqueueSnackbar } = useSnackbar();
 
  const onClick = () => {
    enqueueSnackbar('Copied!');
  };
 
  return <Button onClick={onClick}>Click Me!</Button>;
}

  • src/components/snackbar

  • src/App.js or src/pages/_app.js or src/app/layout.js

    import SnackbarProvider from 'src/components/snackbar';
     
    function App() {
      return <SnackbarProvider>...</SnackbarProvider>;
    }

Reference: