Have A Switch Statement Without Any Extra Padding

[adeelibr]

• I have searched the issues of this repository and believe that this is not a duplicate.

This is my Switch component

`<Switch
          checked={isSubscriptionStatusActive}
          onChange={onHandleChangeSubscriptionStatus}
          disabled={subscriptionStatus === 'deactive'}
          aria-label="subscribption-status"
          classes={{
            root: classes.root,
            bar:  classes.bar,
          }}
  >`

  root: {
    display: 'inline-flex',
    width: 0,
    position: 'relative',
    flexShrink: 0,
  },
  bar: {
    borderRadius: 7,
    display: 'block',
    position: 'absolute',
    width: 34,
    height: 14,
    top: '50%',
    marginTop: -7,
    left: '50%',
    marginLeft: 0,
  },
};```

## Steps to Reproduce (for bugs)
https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z


## Context
I want to have a Switch component without extra height, width, padding, margin

## Environment
| Tech         | Version |
|--------------|---------|
| Material-UI  |        beta 24 |
| React        |      16.2   |

[mbrookes]

Please post implementation questions to gitter or StackOverflow, so we can keep github issues for bugs and feature requests. Feel free to link from here if you think an answer to your question will help others.