[React][TypeScript][MUI] MUI Switch Toogle버튼의 크기를 변경해보자 (width, height, 동그라미 크기, 동그라미 위치)

const Toggle = styled(Switch)`
  width: 32px;
  height: 16px;
  padding: 0;
  margin-top: -4px;
  margin-left: 8px;
  margin-right: 8px;
  // Switch 컴포넌트의 크기 변경
  .MuiSwitch-switchBase {
    padding: 0;
    margin-top: 2px;
    margin-left: 2px;
  }

  // 동그라미 위치 조정
  .Mui-checked {
    transform: translateX(60%); /* 수정 */
    padding-left: 5px;
    transition: padding-left 0.2s ease-in-out;
  }

  //동그라미 색상 변경
  .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
    background: ${(props) => props.theme.body.primary};
    opacity: 1;
  }

  // Switch 컴포넌트의 트랙 색상 변경
  .MuiSwitch-colorPrimary {
    color: ${(props) => props.theme.body.white};
  }
  // Switch 컴포넌트 내부 아이콘의 크기도 함께 변경
  .MuiSwitch-thumb {
    width: 12px;
    height: 12px;
  }
  // Switch 컴포넌트의 트랙 크기도 함께 변경
  .MuiSwitch-track {
    border-radius: 32px;
  }
`;

결과 화면