fix: MySwitch组件开发

src/components/mui/MySelect.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2021-12-04 15:46:25
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 15:54:59
+ * @LastEditTime: 2022-07-21 18:00:58
  * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -67,6 +67,17 @@ export default function MySelect(props: IProps) {
 				},
 			},
 
+			MuiMenuItem: {
+				styleOverrides: {
+					root: {
+						":hover": {
+							backgroundColor: "#ECF4FF ",
+							color: "#1370FF",
+						},
+					},
+				},
+			},
+
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {

src/components/mui/MySwitch.tsx

-import * as React from 'react';
-import Switch from '@mui/material/Switch';
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-11 11:56:58
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-21 18:30:18
+ * @FilePath: /bkunyun/src/components/mui/MySwitch.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import * as React from "react";
+import Switch, { SwitchProps } from "@mui/material/Switch";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
-
-type IMySwitchProps = {
+interface IMySwitchProps extends SwitchProps {
 	value: boolean;
 	onChange?: any;
 	disabled?: boolean;
-
 }
 
 const theme = createTheme({
@@ -15,29 +21,28 @@ const theme = createTheme({
 		MuiSwitch: {
 			styleOverrides: {
 				root: {
-                    height: '22px',
-                    width: '40px',
-                    boxSizing: 'border-box',
-                    padding: '0',
-				},
-                switchBase:{
-                    top: '4px',
-                    left: '4px',
+					boxSizing: "border-box",
+					padding: "0",
+				},
+				switchBase: {
+					top: "4px",
+					left: "4px",
 					padding: 0,
-                    '&.Mui-checked': {
-                        left: '2px',
-                        '& + .MuiSwitch-track': {
+					"&.Mui-checked": {
+						left: "2px",
+						"& + .MuiSwitch-track": {
+							backgroundColor: "#1370ff",
 							opacity: 1,
-                        }
+						},
 					},
 				},
 				thumb: {
-                    width: '14px',
-                    height: '14px',
-                    color: '#fff'
+					width: "14px",
+					height: "14px",
+					color: "#fff",
 				},
 				track: {
-                    borderRadius: '11px',
+					borderRadius: "11px",
 					backgroundColor: "#E6E8EB",
 					opacity: 1,
 				},
@@ -46,15 +51,29 @@ const theme = createTheme({
 	},
 });
 
-
-
 const MySwitch = (props: IMySwitchProps) => {
-    const {value, onChange, disabled= false} = props;
+	const { value, onChange, disabled = false, size, ...other } = props;
 	return (
 		<ThemeProvider theme={theme}>
-        <Switch checked={value} disabled={disabled} onChange={onChange} />
+			<Switch
+				checked={value}
+				disabled={disabled}
+				onChange={onChange}
+				sx={
+					size === "medium"
+						? {
+								width: 44,
+								height: 24,
+						  }
+						: {
+								width: 40,
+								height: 22,
+						  }
+				}
+				{...other}
+			/>
 		</ThemeProvider>
-    )
-}
+	);
+};
 
 export default MySwitch;