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没有任何＆＃34;额外的＆＃34;宽度或高度。它周围的空白用于渲染波纹。

您可以使用disableRipple道具禁用纹波，并且会影响切换宽度，但会深入挖掘源，不幸的是，目前无法将道具传递给SwitchBase这将需要影响用于切换的IconButton＆＃34; thumb＆＃34;。

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

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

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

重现步骤（针对错误）

1 个答案: