Commit d10e919b authored by chenshouchao's avatar chenshouchao

feat: 修改switch组件

parent ea0d7bdb
...@@ -27,23 +27,8 @@ const MySwitch = (props: IMySwitchProps) => { ...@@ -27,23 +27,8 @@ const MySwitch = (props: IMySwitchProps) => {
...other ...other
} = props; } = props;
const bgColor = useMemo(() => { const theme = useMemo(() => {
if (disabled) { return createTheme({
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: { components: {
MuiSwitch: { MuiSwitch: {
styleOverrides: { styleOverrides: {
...@@ -58,7 +43,9 @@ const MySwitch = (props: IMySwitchProps) => { ...@@ -58,7 +43,9 @@ const MySwitch = (props: IMySwitchProps) => {
"&.Mui-checked": { "&.Mui-checked": {
left: "2px", left: "2px",
"& + .MuiSwitch-track": { "& + .MuiSwitch-track": {
backgroundColor: bgColor, backgroundColor: disabled
? "rgba(166, 211, 255, 1)"
: "rgba(19, 112, 255, 1)",
opacity: 1, opacity: 1,
}, },
}, },
...@@ -70,13 +57,16 @@ const MySwitch = (props: IMySwitchProps) => { ...@@ -70,13 +57,16 @@ const MySwitch = (props: IMySwitchProps) => {
}, },
track: { track: {
borderRadius: "11px", borderRadius: "11px",
backgroundColor: "rgba(221, 225, 230, 1)", backgroundColor: disabled
? "RGBA(240, 242, 245, 1)"
: "RGBA(221, 225, 230, 1)",
opacity: 1, opacity: 1,
}, },
}, },
}, },
}, },
}); });
}, [disabled]);
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment