I'm having trouble customizing the material ui switch button. Is there a css genius who knows how to get this specifik look? This is how i want it to look & When toggled it should look like this but This is how it looks now with this code,
import clsx from 'clsx';
import { styled } from '@mui/system';
import { useSwitch, UseSwitchProps } from '@mui/base/SwitchUnstyled';
const blue = {
500: '#007FFF',
};
const grey = {
400: '#BFC7CF',
500: '#AAB4BE',
};
const BasicSwitchRoot = styled('span')`
font-size: 0;
position: relative;
display: inline-block;
width: 160px;
height: 40px;
margin: 10px;
background: ${grey[400]};
border-radius: 10px;
cursor: pointer;
&.Switch-disabled {
opacity: 0.4;
cursor: not-allowed;
}
&.Switch-checked {
background: ${grey[500]};
}
`;
const BasicSwitchInput = styled('input')`
cursor: inherit;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
margin: 0;
`;
const BasicSwitchThumb = styled('span')`
display: block;
width: 80px;
height: 40px;
top: 0px;
left: 0px;
border-radius: 10px;
background-color: #092c4c;
position: relative;
transition: all 300ms ease;
&.Switch-focusVisible {
background-color: ${grey[400]};
box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
}
&.Switch-checked {
left: 80px;
top: 0px;
background-color: #092c4c;
}
`;
function BasicSwitch(props: UseSwitchProps) {
const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
const stateClasses = {
'Switch-checked': checked,
'Switch-disabled': disabled,
'Switch-focusVisible': focusVisible,
};
return (
<BasicSwitchRoot className={clsx(stateClasses)}>
<BasicSwitchThumb className={clsx(stateClasses)} />
<BasicSwitchInput {...getInputProps()} aria-label='Demo switch' />
</BasicSwitchRoot>
);
}
export const ToggleViewButton = () => {
return (
<div>
<BasicSwitch />
</div>
);
};
Would want the end goal to be something like this https://codepen.io/nikkk-me/pen/abvPjeG but with my colors, less rounded and and using material ui instead of creating my own component.