feat: message组件增加关闭按钮、样式同步设计稿

src/components/MySnackbar/MySnackbarProvider.tsx

@@ -66,6 +66,7 @@ const MySnackbarProvider = ({
 }: MySnackbarProviderProp) => {
 	const {
 		open,
+		setOpen,
 		messageInfo,
 		handleExited,
 		success,
@@ -96,9 +97,35 @@ const MySnackbarProvider = ({
 			MuiAlert: {
 				styleOverrides: {
 					root: {
-						color: getColorStyle,
-						"& .MuiAlert-icon": {
-							color: getColorStyle,
+						width: "360px",
+						height: "38px",
+						"&.MuiAlert-standardError": {
+							color: "#FF4E4E",
+							background: "rgba(255, 237, 237, 1)",
+							"& .MuiAlert-icon": {
+								color: "#FF4E4E",
+							},
+						},
+						"&.MuiAlert-standardInfo": {
+							color: "rgba(19, 112, 255, 1)",
+							background: "rgba(235, 243, 255, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(19, 112, 255, 1)",
+							},
+						},
+						"&.MuiAlert-standardSuccess": {
+							color: "rgba(2, 171, 131, 1)",
+							background: "rgba(217, 255, 238, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(2, 171, 131, 1)",
+							},
+						},
+						"&.MuiAlert-standardWarning": {
+							color: "rgba(255, 185, 25, 1)",
+							background: "rgba(255, 246, 226, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(255, 185, 25, 1)",
+							},
 						},
 					},
 				},
@@ -138,6 +165,9 @@ const MySnackbarProvider = ({
 						variant={variant}
 						elevation={elevation}
 						sx={{ boxShadow: "unset", ...alertSx }}
+						onClose={() => {
+							setOpen(false);
+						}}
 					>
 						{messageInfo?.content}
 					</Alert>

src/components/MySnackbar/useMySnackbar.ts

@@ -69,6 +69,7 @@ const useMySnackbar = () => {
 
   return {
     open,
+    setOpen,
     messageInfo,
     handleExited,
     success,