feat: 修改switch组件

src/components/mui/MySwitch.tsx

@@ -27,56 +27,46 @@ const MySwitch = (props: IMySwitchProps) => {
 		...other
 	} = props;
 
-	const bgColor = useMemo(() => {
-		if (disabled) {
-			if (value) {
-				return "rgba(166, 211, 255, 1)";
-			} else {
-				return "rgba(221, 225, 230, 1)";
-			}
-		} else {
-			if (value) {
-				return "rgba(19, 112, 255, 1)";
-			} else {
-				return "rgba(221, 225, 230, 1)";
-			}
-		}
-	}, [disabled, value]);
-
-	const theme = createTheme({
-		components: {
-			MuiSwitch: {
-				styleOverrides: {
-					root: {
-						boxSizing: "border-box",
-						padding: "0",
-					},
-					switchBase: {
-						top: "4px",
-						left: "4px",
-						padding: 0,
-						"&.Mui-checked": {
-							left: "2px",
-							"& + .MuiSwitch-track": {
-								backgroundColor: bgColor,
-								opacity: 1,
+	const theme = useMemo(() => {
+		return createTheme({
+			components: {
+				MuiSwitch: {
+					styleOverrides: {
+						root: {
+							boxSizing: "border-box",
+							padding: "0",
+						},
+						switchBase: {
+							top: "4px",
+							left: "4px",
+							padding: 0,
+							"&.Mui-checked": {
+								left: "2px",
+								"& + .MuiSwitch-track": {
+									backgroundColor: disabled
+										? "rgba(166, 211, 255, 1)"
+										: "rgba(19, 112, 255, 1)",
+									opacity: 1,
+								},
 							},
 						},
-					},
-					thumb: {
-						width: "14px",
-						height: "14px",
-						color: "#fff",
-					},
-					track: {
-						borderRadius: "11px",
-						backgroundColor: "rgba(221, 225, 230, 1)",
-						opacity: 1,
+						thumb: {
+							width: "14px",
+							height: "14px",
+							color: "#fff",
+						},
+						track: {
+							borderRadius: "11px",
+							backgroundColor: disabled
+								? "RGBA(240, 242, 245, 1)"
+								: "RGBA(221, 225, 230, 1)",
+							opacity: 1,
+						},
 					},
 				},
 			},
-		},
-	});
+		});
+	}, [disabled]);
 
 	return (
 		<ThemeProvider theme={theme}>