<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">This is my Switch component</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="`&lt;Switch
          checked={isSubscriptionStatusActive}
          onChange={onHandleChangeSubscriptionStatus}
          disabled={subscriptionStatus === 'deactive'}
          aria-label=&quot;subscribption-status&quot;
          classes={{
            root: classes.root,
            bar:  classes.bar,
          }}
  &gt;`"><pre class="notranslate"><code class="notranslate">`&lt;Switch
          checked={isSubscriptionStatusActive}
          onChange={onHandleChangeSubscriptionStatus}
          disabled={subscriptionStatus === 'deactive'}
          aria-label="subscribption-status"
          classes={{
            root: classes.root,
            bar:  classes.bar,
          }}
  &gt;`
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  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   |"><pre lang="const" class="notranslate"><code class="notranslate">  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   |
</code></pre></div>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Ripple effect freeze in Button(when focus)</p>
<h3 dir="auto">Versions</h3>
<p dir="auto">0.18.7</p>
<p dir="auto"><a href="http://www.material-ui.com/#/components/flat-button" rel="nofollow">http://www.material-ui.com/#/components/flat-button</a></p>