37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import {Switch, SwitchProps} from "@mui/material";
|
|
import {styled} from "@mui/material/styles";
|
|
|
|
export default styled((props: SwitchProps) => (
|
|
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />))
|
|
(() => ({
|
|
width: 52,
|
|
height: 31,
|
|
padding: 0,
|
|
'& .MuiSwitch-switchBase': {
|
|
padding: 0,
|
|
margin: 2,
|
|
transitionDuration: '300ms',
|
|
'&.Mui-checked': {
|
|
transform: 'translateX(21px)',
|
|
color: '#fff',
|
|
'& + .MuiSwitch-track': {
|
|
backgroundColor: '#7E2AEA',
|
|
opacity: 1,
|
|
border: 0,
|
|
},
|
|
},
|
|
'&.Mui-disabled .MuiSwitch-thumb': {
|
|
color: '#9A9AAF',
|
|
boxShadow: 'none'
|
|
},
|
|
},
|
|
'& .MuiSwitch-thumb': {
|
|
boxSizing: 'border-box',
|
|
width: 27,
|
|
height: 27,
|
|
},
|
|
'& .MuiSwitch-track': {
|
|
borderRadius: 40 / 2,
|
|
backgroundColor: '#9A9AAF'
|
|
},
|
|
})); |