React Material UI具有无任何额外填充的开关

Question

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

Answer 1

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

您可以使用disableRipple prop禁用纹波，并在您进行dicscovered时影响切换宽度，但是深入挖掘源代码，遗憾的是，目前无法将道具传递给SwitchBase，这会影响所使用的IconButton。对于开关“拇指”。

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

PS。你忘记了从你的问题链接到这里，但无论如何我找到了它。 :)