如何在 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

Consider this: I am not a front-end developer and did not develop in Material-UI framework for years now. so just look for a different answer or send me an edit version which works.

For changing the size of the switch component you should use size props that can be in two size 'small' || 'medium'.For example:

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

If it doesn't work for you then You need to change CSS style at root class:

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

Due to material-UI component API for changing the color of a switch you need to add a color props into you Switch JSX tag and choose from these enum:

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

your Switch should be like this:

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

Material-UI for switch size prop