如何设计Rebass开关的样式

Question

在react中使用Rebass/Forms，我无法正确地使用样式调整开关组件的大小。(我也在使用@emotion/styled)

我尝试过使用size属性，但这并没有给出简单地更改开关比例所需的效果。

我尝试使用sx属性并给它一个width和一个height，但这只会调整按钮元素的大小，而不会调整内部div的大小，即“滑动点”。

我知道我可以针对内部div本身编写一些样式，但我希望找到一种方法来给它一个单一的高度和宽度，它同时适用于按钮和内部div。

<Switch
  sx={{ width: "30px", height: "15px" }}
/>

https://codesandbox.io/s/styling-rebass-switch-uu7wg

Answer 1

因为高度和宽度都是hard coded in the source，所以不可能“开箱即用”地做你想做的事情

幸运的是，rebass的内部结构非常好，所以可以使用rebass源代码中的一个小拷贝来创建自己的内部结构。

import React from "react";
import { Box } from "reflexbox";

export const ResizableSwitch = ({
  checked,
  height = 24,
  width = 40,
  ...props
}) => (
  <Box
    as="button"
    type="button"
    role="switch"
    tx="forms"
    variant="switch"
    aria-checked={checked}
    {...props}
    __css={{
      appearance: "none",
      m: 0,
      p: 0,
      width,
      height,
      color: "primary",
      bg: "transparent",
      border: "1px solid",
      borderColor: "primary",
      borderRadius: 9999,
      "&[aria-checked=true]": {
        bg: "primary"
      },
      ":focus": {
        outline: "none",
        boxShadow: "0 0 0 2px"
      }
    }}
  >
    <Box
      aria-hidden
      style={{
        transform: checked ? `translateX(${width - height}px)` : "translateX(0)"
      }}
      sx={{
        mt: "-1px",
        ml: "-1px",
        width: height,
        height,
        borderRadius: 9999,
        border: "1px solid",
        borderColor: "primary",
        bg: "background",
        transitionProperty: "transform",
        transitionTimingFunction: "ease-out",
        transitionDuration: "0.1s",
        variant: "forms.switch.thumb"
      }}
    />
  </Box>
);

https://codesandbox.io/s/styling-rebass-switch-r6tmx?file=/src/App.js

Answer 2

不幸的是，你不能。我深入研究了这个包本身，似乎对这个包中编写的组件没有固定的规则。某些组件确实获得了props和sx。但也有一些组件，比如switch，它将另一个组件作为子组件托管，并且没有传递任何道具给它。

如果您看一下switch in this page here的实现

export const Switch = forwardRef(({
  checked,
  ...props
}, ref) =>
  <Box
    ref={ref}
    as='button'
    type='button'
    role='switch'
    tx='forms'
    variant='switch'
    aria-checked={checked}
    {...props}
    __css={{
      appearance: 'none',
      m: 0,
      p: 0,
      width: 40,
      height: 24,
      color: 'primary',
      bg: 'transparent',
      border: '1px solid',
      borderColor: 'primary',
      borderRadius: 9999,
      '&[aria-checked=true]': {
        bg: 'primary',
      },
      ':focus': {
        outline: 'none',
        boxShadow: '0 0 0 2px'
      },
    }}>
    <Box
      aria-hidden
      style={{
        transform: checked ? 'translateX(16px)' : 'translateX(0)',
      }}
      sx={{
        mt: '-1px',
        ml: '-1px',
        width: 24,
        height: 24,
        borderRadius: 9999,
        border: '1px solid',
        borderColor: 'primary',
        bg: 'background',
        transitionProperty: 'transform',
        transitionTimingFunction: 'ease-out',
        transitionDuration: '0.1s',
        variant: 'forms.switch.thumb',
      }}
    />
  </Box>
)

有两个Box组件(它们是包的基本组件)，一个是另一个的子组件。第一个Box是开关的区域，子Box是您正在寻找的圆/按钮，如果您查看此组件，您将看到没有传递给它的外部变量，因此没有任何东西可以更改-样式已经写入。

这是Button/Circle组件：

    <Box
      aria-hidden
      style={{
        transform: checked ? 'translateX(16px)' : 'translateX(0)',
      }}
      sx={{
        mt: '-1px',
        ml: '-1px',
        width: 24,
        height: 24,
        borderRadius: 9999,
        border: '1px solid',
        borderColor: 'primary',
        bg: 'background',
        transitionProperty: 'transform',
        transitionTimingFunction: 'ease-out',
        transitionDuration: '0.1s',
        variant: 'forms.switch.thumb',
      }}
    />

如果您仍然愿意使用该包，则可以通过覆盖css、为组件提供className并对其子组件应用样式来克服此问题。

此外，您还可以打开issue或建议对package github存储库进行修复。

Answer 3

看一下Switch source code，似乎没有任何属性被传播到内部<div>...你会打开一个问题吗？

同时，您可以为子项和/或基于属性设置css属性：

.myswitch {
  width: 30px !important;
  height: 15px !important;
  background: gray !important;
}

.myswitch[aria-checked="true"] {
  background: red !important;
}

.myswitch div {
  width: 15px;
  height: 15px;
  background: red;
}

然后：

<Switch className="myswitch" />

https://codesandbox.io/s/styling-rebass-switch-o0j8t