React Material UI 有一个没有任何额外填充的开关答案

【问题标题】：React Material UI Have A Switch Without Any Extra PaddingReact Material UI 有一个没有任何额外填充的开关
【发布时间】：2018-06-05 15:12:30
【问题描述】：

我想要一个没有额外高度、宽度、内边距、边距的 Switch 组件

这是我的Switch 组件

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

这是它的样式

let style = {
 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,
 },
};

重现步骤（针对错误）

https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z

在此处提交的材料 UI 问题 https://github.com/mui-org/material-ui/issues/9587

【问题讨论】：

我检查链接是否正常工作。

标签： css reactjs material-ui

【解决方案1】：

从技术上讲，Switch 没有任何“额外”的宽度或高度。它周围的空白用于渲染波纹。

您可以使用 disableRipple 道具禁用波纹，并影响您发现的 Switch 宽度，但深入研究源代码，不幸的是，目前无法将道具传递给 SwitchBase 需要影响用于“拇指”开关的 IconButton。

您也许可以修改您的问题以讨论提交 PR 以解决此限制的可能性。出于类似目的，我们在其他组件上有 xxxProps 道具。

PS。你忘了从你的问题链接到这里，但我还是找到了。 :)

【讨论】：