fix: add React.forwardRef to MuiAlert (#465)

Signed-off-by: RusherRG <rushang101@gmail.com>
Auto-DL · Feb 22, 2022 · 3179d49 · 3179d49
1 parent ff24d82
commit 3179d49
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/FrontEndApp/autodl-platform/components/AuthForm/AuthForm.tsx b/FrontEndApp/autodl-platform/components/AuthForm/AuthForm.tsx
@@ -19,7 +19,7 @@ import EmailIcon from "@mui/icons-material/Email";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import LockIcon from "@mui/icons-material/Lock";
-import MuiAlert from '@mui/material/Alert';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { FormValues } from "./AuthModel";
@@ -93,9 +93,9 @@ const useStyles = makeStyles({
   },
 });
 
-function Alert(props: any) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref,) {
+  return <MuiAlert elevation={6} ref={ref} variant="outlined" {...props} />;
+});
 
 export default function AuthForm() {
   const classes = useStyles();
@@ -757,7 +757,7 @@ export default function AuthForm() {
         autoHideDuration={5000}
         onClose={handleAlertClose}
       >
-        <Alert onClose={handleAlertClose} severity={alert.severity}>
+        <Alert onClose={handleAlertClose} severity={alert.severity == "success" ? "success" : "error"}>
           {alert.message}
         </Alert>
       </Snackbar>

diff --git a/FrontEndApp/autodl-platform/components/SideBar/SideBar.tsx b/FrontEndApp/autodl-platform/components/SideBar/SideBar.tsx
@@ -5,7 +5,7 @@ import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
 import Drawer from '@mui/material/Drawer';
 import Snackbar from '@mui/material/Snackbar';
-import MuiAlert from '@mui/material/Alert';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import List from '@mui/material/List';
 import Toolbar from '@mui/material/Toolbar';
 import Divider from '@mui/material/Divider';
@@ -85,9 +85,9 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-function Alert(props: any) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref,) {
+  return <MuiAlert elevation={6} ref={ref} variant="outlined" {...props} />;
+});
 
 export default function SideBar({ activeTab, projectName }: Props) {
   const classes = useStyles();
@@ -193,7 +193,7 @@ export default function SideBar({ activeTab, projectName }: Props) {
         autoHideDuration={5000}
         onClose={handleAlertClose}
       >
-        <Alert onClose={handleAlertClose} severity={alert.severity}>
+        <Alert onClose={handleAlertClose} severity={alert.severity == "success" ? "success" : "error"}>
           {alert.message}
         </Alert>
       </Snackbar>