手动设置 MaterialUI Switch 组件的大小

Question

Im trying to change the size of a Material-UI Switch because the default size is not large enough. Ive managed to increase the size, but the behaviour is now not fantastic.
It looks good when it is in its default state:

However, when I change its state it loses the style:

I cant work out how to change the styles so the Thumb goes all the way to the right of the Track.

 <Switch
   onChange={setPrivateSwap}
   classes={{
     root: classes.root,
     switchBase: classes.switchBase,
     checked: classes.checked,
     track: classes.track,
     thumb: classes.thumb,
   }}
 />

const useStyles = makeStyles({
  root: {
    width: '90px',
    height: '50px',
    padding: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  track: {
    width: '40px',
    height: '20px',
    borderRadius: '10px',
  },
  switchBase: {
    '&$checked': {
      color: '#007D81',
    },
    '&$checked + $track': {
      backgroundColor: 'rgba(0,125,129,0.3)',
    },
  },
  checked: {},
  thumb: {
    width: '32px',
    height: '32px',
  },
});

Answer 1

Here I have adjusted the switch use translateX(value) property. Here is the code:

import React from "react";
import { Switch } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

    const useStyles = makeStyles({
      root: {
        width: "90px",
        height: "50px",
        padding: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      },
      track: {
        width: "40px",
        height: "20px",
        borderRadius: "10px",
      },
      switchBase: {
        "&$checked": {
          color: "#007D81",
          transform: "translateX(40px)",
        },
        "& + $track": {
          backgroundColor: "rgba(0,125,129,0.3)",
        },
      },
      checked: {},
      thumb: {
        width: "32px",
        height: "32px",
        transform: "translateX(0px)",
      },
    });
    
    export default function () {
      const classes = useStyles();
    
      const setPrivateSwap = function () {
        console.log("I a ali");
      };
      return (
        <Switch
          onChange={setPrivateSwap}
          classes={{
            root: classes.root,
            switchBase: classes.switchBase,
            checked: classes.checked,
            track: classes.track,
            thumb: classes.thumb,
          }}
        />
      );
    }

You can make further adjustments and refinements using translateX in thumb and switchBase class.