Change SnackBar alert in Koneksyon component

components/kont/koneksyon.js

@@ -13,12 +13,15 @@ import {
   Snackbar,
   Typography
 } from '@material-ui/core'
-import {Alert} from '@material-ui/lab'
-import Slide from '@material-ui/core/Slide'
 import {Visibility, VisibilityOff} from '@material-ui/icons'
+import MuiAlert from '@material-ui/lab/Alert'
 
 import {validateEmail} from '../../lib/utils/emails'
 
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
+
 function Koneksyon() {
   const [loginError, setError] = useState('')
   const [credentials, setCredentials] = useState({username: '', password: ''})
@@ -123,10 +126,9 @@ function Koneksyon() {
         <Snackbar
           open={open}
           autoHideDuration={6000}
-          TransitionComponent={Slide}
           onClose={handleClose}
         >
-          <Alert severity='error' onClose={handleClose}>{loginError}</Alert>
+          <Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
         </Snackbar>
       )}
     </Container>