javascript - 如何设置 Rebass Switch 的样式

在 react 中使用 Rebass/Forms，我无法正确使用样式正确调整 Switch 组件的大小。 (我也在使用 @emotion/styled )
我曾尝试使用 size 属性，但这并不能产生简单改变开关比例的预期效果。
我尝试使用 sx 属性并给它一个 width 和一个 height ，但这只会调整按钮元素的大小，而不是“滑动点”的内部 div
我知道我可以编写一些针对内部 div 本身的样式，但我想找到一种方法来一次给它一个高度和宽度，并且它同时适用于按钮和内部 div。

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

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

最佳答案

因为高度和宽度是 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

关于javascript - 如何设置 Rebass Switch 的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61490576/