css - 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

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

Answer 1

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

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

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

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