如何在 Material UI 中更改切换开关的大小

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 组件的更改需要一些详细的样式。我在不是很明显的地方加了一些cmets：

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

考虑一下：我不是前端开发人员，也没有在 多年以来的 Material-UI 框架。所以只需寻找不同的答案或发送 我的编辑版本有效。

要更改开关组件的大小，您应该使用size 可以有两种大小的道具'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 for switch size prop