docs:typescript:formatted

docs/data/material/components/snackbars/CustomizedSnackbars.js

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
-import MuiAlert from '@mui/material/Alert';
-
-const Alert = React.forwardRef(function Alert(props, ref) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
-});
+import Alert from '@mui/material/Alert';
 
 export default function CustomizedSnackbars() {
   const [open, setOpen] = React.useState(false);
@@ -24,19 +19,18 @@ export default function CustomizedSnackbars() {
   };
 
   return (
-    <Stack spacing={2} sx={{ width: '100%' }}>
-      <Button variant="outlined" onClick={handleClick}>
-        Open success snackbar
-      </Button>
+    <div>
+      <Button onClick={handleClick}>Open snackbar</Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
-          This is a success message!
+        <Alert
+          onClose={handleClose}
+          severity="success"
+          variant="filled"
+          sx={{ width: '100%' }}
+        >
+          This is a success Alert inside a Snackbar!
         </Alert>
       </Snackbar>
-      <Alert severity="error">This is an error message!</Alert>
-      <Alert severity="warning">This is a warning message!</Alert>
-      <Alert severity="info">This is an information message!</Alert>
-      <Alert severity="success">This is a success message!</Alert>
-    </Stack>
+    </div>
   );
 }

docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview

@@ -1,12 +1,11 @@
-<Button variant="outlined" onClick={handleClick}>
-  Open success snackbar
-</Button>
+<Button onClick={handleClick}>Open snackbar</Button>
 <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-  <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
-    This is a success message!
+  <Alert
+    onClose={handleClose}
+    severity="success"
+    variant="filled"
+    sx={{ width: '100%' }}
+  >
+    This is a success Alert inside a Snackbar!
   </Alert>
-</Snackbar>
-<Alert severity="error">This is an error message!</Alert>
-<Alert severity="warning">This is a warning message!</Alert>
-<Alert severity="info">This is an information message!</Alert>
-<Alert severity="success">This is a success message!</Alert>
+</Snackbar>

docs/data/material/components/snackbars/SimpleSnackbar.js

@@ -37,7 +37,7 @@ export default function SimpleSnackbar() {
 
   return (
     <div>
-      <Button onClick={handleClick}>Open simple snackbar</Button>
+      <Button onClick={handleClick}>Open snackbar</Button>
       <Snackbar
         open={open}
         autoHideDuration={6000}

docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview

@@ -1,4 +1,4 @@
-<Button onClick={handleClick}>Open simple snackbar</Button>
+<Button onClick={handleClick}>Open snackbar</Button>
 <Snackbar
   open={open}
   autoHideDuration={6000}