手动设置MaterialUI Switch组件的大小

Question

我正在尝试更改 Material-UI Switch 的大小，因为默认大小不够大。我已经设法增加了大小，但现在的行为并不理想。
当它处于默认状态时看起来不错：

但是，当我更改其状态时，它会失去样式：

我不知道如何更改样式，因此拇指一直到轨道的右侧。

 <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

这里我调整了开关使用translateX(value)属性。这是代码：

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,
          }}
        />
      );
    }

您可以使用thumb和switchBase类中的translateX进行进一步的调整和细化。