如何在 Material UI 中更改 Toggle Switch 的大小

Question

這是我第一次使用 Material UI（我也是一般反應的菜鳥）而且我似乎無法更改我正在使用的切換開關的大小。

這是我到目前為止所擁有的 - 減去所有不相關的東西：

import React, { Component } from "react";
import Switch from "@material-ui/core/Switch";


const styles = {
  root: {
    height: "500",
  },
};

class ToggleActive extends Component {
  state = {
    checked: true,
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <label htmlFor="normal-switch">
        <Switch
          classes={styles.root}
          checked={this.state.checked}
          onChange={this.handleChange("checked")}
        />
      </label>
    );
  }
}

export default ToggleActive;

我只是想讓它變大一點，然后改變顏色。 任何幫助，將不勝感激！

Answer 1

更改Switch樣式，需要一點點的詳細樣式。 我在不太明顯的部分添加了一些注釋：

import {createStyles, makeStyles, Switch, Theme} from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 54,
      height: 40,
      padding: 0,
      margin: theme.spacing(1),
    },
    switchBase: {
      padding: 1,
      '&$checked': {
        // This is the part that animates the thumb when the switch is toggled (to the right)
        transform: 'translateX(16px)',
        // This is the thumb color
        color: theme.palette.common.white,
        '& + $track': {
          // This is the track's background color (in this example, the iOS green)
          backgroundColor: '#52d869',
          opacity: 1,
          border: 'none',
        },
      },
    },
    thumb: {
      width: 36,
      height: 36,
    },
    track: {
      borderRadius: 19,
      border: `1px solid ${theme.palette.grey[300]}`,
      // This is the background color when the switch is off
      backgroundColor: theme.palette.grey[200],
      height: 30,
      opacity: 1,
      marginTop: 4,
      transition: theme.transitions.create(['background-color', 'border']),
    },
    checked: {},
    focusVisible: {},
  })
);

您可以將其實現為功能組件：

import React, { useState } from 'react';
// import {createStyles, makeStyles, ...

// const useStyles = makeStyles((theme: Theme) => ...

export const ToggleItem: React.FC = () => {
  const styles = useStyles();
  const [toggle, setToggle] = useState<boolean>(false);

  return (
    <Switch
      classes={{
        root: styles.root,
        switchBase: styles.switchBase,
        thumb: styles.thumb,
        track: styles.track,
        checked: styles.checked,
      }}
      checked={toggle}
      onChange={() => setToggle(!toggle)}
      name={title}
      inputProps={{'aria-label': 'my toggle'}}
    />
  );
};

Answer 2

這現在更容易完成，因為 MUI 在文檔中有一個官方示例：

https://mui.com/material-ui/react-switch/#customization

以此為例，使開關變大的最少更改數量實際上就是這樣：

export const MuiSwitchLarge = styled(Switch)(({ theme }) => ({
  width: 68,
  height: 34,
  padding: 7,
  "& .MuiSwitch-switchBase": {
    margin: 1,
    padding: 0,
    transform: "translateX(6px)",
    "&.Mui-checked": {
      transform: "translateX(30px)",
    },
  },
  "& .MuiSwitch-thumb": {
    width: 32,
    height: 32,
  },
  "& .MuiSwitch-track": {
    borderRadius: 20 / 2,
  },
}));

這是一個帶有更大開關的分叉沙箱的鏈接： https://codesandbox.io/s/customizedswitches-material-demo-forked-4m2t71

Answer 3

考慮一下：我不是前端開發人員，並且多年來沒有在 Material-UI 框架中進行開發。 所以只需尋找不同的答案或向我發送一個有效的編輯版本。

為了改變開關組件的大小，你應該使用可以有兩個大小'small' || 'medium' size道具'small' || 'medium' 'small' || 'medium' 。例如：

<Switch
   size="small"
   checked={this.state.checked}
   onChange={this.handleChange("checked")}
   color='primary'
/>

如果它不適合您，那么您需要在根類中更改 CSS 樣式：

const styles = {
     root: {
        height: 500,
        width: 200},
};

由於用於更改開關顏色的 material-UI 組件 API，您需要將顏色道具添加到您的 Switch JSX 標簽中，並從以下枚舉中進行選擇：

  enum: 'primary' |'secondary' | 'default'

你的 Switch 應該是這樣的：

<Switch
   classes={styles.root}
   checked={this.state.checked}
   onChange={this.handleChange("checked")}
   color='primary'
/>

用於切換大小道具的 Material-UI