Material UI 切换垂直而不是水平

Question

我在代码中使用 Material UI 中的 Switch，想知道是否可以使其垂直而不是水平？我计划主要在手机上使用该应用程序，如果它可以在移动设备上切换到垂直模式，那就更合适了。

这是我的组件代码：

const useStyles = makeStyles((theme) => ({
    fabDiv: {
        position: 'absolute',
        top: theme.spacing(15),
        right: theme.spacing(2),
        padding: '0.2rem',
        textShadow: '0.06rem 0.06rem #000000',
        fontFamily: 'PT Sans Caption',
        boxShadow: '0rem 0.1rem 0.1rem #006bb3',
        borderRadius: '0.6rem',
        background: '#00BFFF',
        color: '#F8F8F8'
    },
    [theme.breakpoints.down('sm')]: {
        fabDiv: {
            
        }
    }
}));

const theme = createTheme({
    components: {
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            // Controls default (unchecked) color for the thumb
            color: "#F8F8F8"
          },
          colorPrimary: {
            "&.Mui-checked": {
              // Controls checked color for the thumb
              color: "#F8F8F8"
            }
          },
          track: {
            // Controls default (unchecked) color for the track
            opacity: 0.6,
            backgroundColor: "#F8F8F8",
            ".Mui-checked.Mui-checked + &": {
              // Controls checked color for the track
              opacity: 0.6,
              backgroundColor: "#F8F8F8"
            }
          }
        }
      }
    }
  });

const WeightConverter = (props) => {
    const {
        onChange,
        checked
    } = props;
    const classes = useStyles();
    
    return (
        <ThemeProvider theme={theme}>
            <div className={classes.fabDiv} >
            lb
            <Switch 
                checked={checked}
                onChange={onChange}
                >  
            </Switch>
            kg
            </div> 
        </ThemeProvider>   
    )
};

export default WeightConverter;

我相信我应该使用 [theme.breakpoints.down('sm')] 在切换到移动视图或更小的屏幕时触发更改。

我尝试查看材质用户界面以及他们在 Switch 上提供的信息，但似乎没有其他选择。有谁知道这是否可能？如果不是，我会想出其他办法，但我想我会问。

以下是该应用程序在笔记本电脑屏幕上的屏幕截图：

在移动视图上：

正如您在移动视图上看到的，fabDiv 切换为垂直，但 Switch 仍然水平。我的目标是让 Switch 垂直发展。 有什么想法吗？

Answer 1

我觉得可以采用将开关组件旋转90°的方式。 CSS代码是

transform: "rotate(90deg)"

所以我们可以像下面这样更新

useStyle

。

const useStyles = makeStyles((theme) => ({
    fabDiv: {
        position: 'absolute',
        top: theme.spacing(15),
        right: theme.spacing(2),
        padding: '0.2rem',
        textShadow: '0.06rem 0.06rem #000000',
        fontFamily: 'PT Sans Caption',
        boxShadow: '0rem 0.1rem 0.1rem #006bb3',
        borderRadius: '0.6rem',
        background: '#00BFFF',
        color: '#F8F8F8'
    },
    switchStyle: {
       transform: rotate(0deg);
    },
    [theme.breakpoints.down('sm')]: {
        fabDiv: {
            
        },
        switchStyle: {
           transform: rotate(90deg);
        }
    }
}));

...
return (
    <ThemeProvider theme={theme}>
        <div className={classes.fabDiv} >
        lb
        <Switch 
            checked={checked}
            onChange={onChange}
            className={classes.switchStyle}
        >  
        </Switch>
        kg
        </div> 
    </ThemeProvider>   
)