react-garden
Version:
React + TypeScript + ThreeJS app using Material UI on NextJS, Apollo Client, GraphQL + WordPress REST APIs, for ThreeD web development.. a part of the threed.ai code family.
42 lines (39 loc) • 1.24 kB
JavaScript
// ** MUI Imports
import Switch from '@mui/material/Switch'
import { styled } from '@mui/material/styles'
import MuiFormControlLabel from '@mui/material/FormControlLabel'
// Styled FormControlLabel component
const FormControlLabel = styled(MuiFormControlLabel)(({ theme }) => ({
marginLeft: 0,
'& .MuiSwitch-root': {
width: 42,
height: 26,
padding: 0,
marginRight: theme.spacing(3),
'& .MuiSwitch-switchBase': {
padding: 1,
'&.Mui-checked': {
transform: 'translateX(16px)',
color: theme.palette.common.white,
'& + .MuiSwitch-track': {
opacity: 1,
border: 'none',
backgroundColor: '#52d869'
}
}
},
'& .MuiSwitch-thumb': {
width: 24,
height: 24
},
'& .MuiSwitch-track': {
opacity: 1,
borderRadius: 13,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.action.selected : theme.palette.grey[50],
border: `1px solid ${theme.palette.grey[400]}`,
transition: theme.transitions.create(['background-color', 'border'])
}
}
}))
const SwitchesCustomized = () => <FormControlLabel label='iOS Style' control={<Switch defaultChecked />} />
export default SwitchesCustomized