How to change size of Toggle Switch in Material UI

Question

This is my first time using Material UI (I'm also a noob with react in general) and I cant seem to change the size of the toggle switch I'm using.

This is what I have so far -minus all the non related stuff:

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;

I just want to make it a bit larger, and change the color. Any help would be appreciated!

Answer 1

The change in the Switch component requires a little bit of detailed styling. I added some comments in parts that are not very obvious:

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

You can implement this as a functional component:

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