css - React Material UI无需任何额外填充即可切换

我想要一个没有额外的高度，宽度，填充，边距的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

最佳答案

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

您可以使用disableRipple道具禁用涟漪效果，并根据自己的发现影响开关的宽度，但要深入研究信号源，很遗憾，目前尚无法将道具传递到SwitchBase，而这需要影响IconButton来实现。用于开关“拇指”。

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

PS。您忘记了从问题链接到此处的链接，但是我还是找到了。 :)

关于css - React Material UI无需任何额外填充即可切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47950420/