Javascript 如何设计Rebass开关

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

@emotion/styled

）

我曾尝试使用

size

属性，但这并不能提供简单更改开关比例的预期效果

我尝试过使用

sx

属性并给它一个

width

和

height

，但这只会调整按钮元素的大小，而不会调整内部div（滑动点）的大小

我知道我可以针对内部div本身编写一些样式，但是我想找到一种方法，一次性给它一个高度和宽度，它同时适用于按钮和内部div

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

---

无法“开箱即用”完成您想做的事情，因为高度和宽度都很高

幸运的是，

rebass

的内部结构非常好，因此可以从rebass源代码中复制一些内容来创建自己的

从“React”导入React；
从“反射框”导入{Box}；
export const resizebleswitch=({
选中的，
高度=24，
宽度=40，
…道具
}) => (
);

---

不幸的是，你不能。我深入研究了这个包本身，似乎这个包中编写的组件没有固定的规则。一些组件确实获得了

道具

和

sx

。但是也有一些组件，比如

switch

，作为子组件承载另一个组件，并且没有向其传递道具

如果您看一下

开关的实现

：

如果您仍然愿意使用该软件包，您可以通过覆盖css、给组件一个类名并对其子组件应用样式来克服这一问题

另外，您还可以在包github存储库上打开一个或建议一个修复程序。

查看它，似乎没有任何属性传播到内部

。。。你能提出一个问题吗

同时，您可以为子对象和/或基于属性设置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;
}

然后：

---

您可以使用CSS transform scale来缩放元素及其子元素。当你使用情感时，这里有一些东西与之相伴

代码沙盒：

import React，{useState}来自“React”；
从“@emotion/styled”导入样式；
从“@rebass/forms”导入{Label，Checkbox，Switch}”；
const Title=styled.h1`
文本对齐：居中；
`;
const FormLabel=已设置样式（标签）`
对齐项目：居中；
`;
const Control=styled.div`
宽度：40px；
`;
常量切换=已设置样式（开关）`
变换：缩放（.7）
`;
导出默认函数App（）{
const[switched，setSwitched]=使用状态（false）；
常量切换开关=（）=>{
设置开关（！开关）；
};
返回(
如何设置Rebass/Forms开关的样式
复选框
toggleSwitch（）}
/>
转换
);
}

添加类开关

<Switch
            
            className="switch"
            sx={{ width: "30px", height: "15px" }}
            checked={switched}
            onClick={() => toggleSwitch()}
          />

toggleSwitch（）}
/>

同时查看应用颜色样式的帮助

bg

和

color

没有你想象的效果。你对

color

的期望是什么？嗨@amaster，我能问你一些关于我答案的反馈吗？这是一个可行的解决方案，但是硬编码的CSS：（当我试图使用一个主题文件并在组件内进行一些调整时。因此，这不是我想要的答案，但仍然是一个好答案。@amaster，背景色对我来说很有用谢谢你的解决方案，我将只制作我自己的组件格式副本，然后能够按照我的意愿使用它。我猜你在examp中使其宽度达到了400px乐只是为了证明你可以，哈哈

.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" />

import React, { useState } from "react";
import styled from "@emotion/styled";
import { Label, Checkbox, Switch } from "@rebass/forms";

const Title = styled.h1`
  text-align: center;
`;

const FormLabel = styled(Label)`
  align-items: center;
`;

const Control = styled.div`
  width: 40px;
`;

const Toggle = styled(Switch)`
  transform: scale(.7)
`;


export default function App() {
  const [switched, setSwitched] = useState(false);
  const toggleSwitch = () => {
    setSwitched(!switched);
  };
  return (
    <div className="App">
      <Title>How to Style Rebass/Forms Switch</Title>
      <FormLabel sx={{ padding: "10px" }}>
        <Control>
          <Checkbox size="16px" sx={{ marginLeft: "10px" }} />
        </Control>
        CheckBox
      </FormLabel>
      <FormLabel sx={{ padding: "10px" }}>
        <Control>
          <Toggle
            checked={switched}
            onClick={() => toggleSwitch()}
          />
        </Control>
        Switch
      </FormLabel>
    </div>
  );
}

button.switch,
button.switch:hover,
button.switch:focus {
  outline: none;
  border: 1px solid grey;
  box-shadow: none;
}

button.switch > div {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #9fa2ab;
}

button.switch > div:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: -2px;
  top: -3px;
  transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.1s ease,
    transform 0.1s ease;
  background-color: #5b5c60;
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

button.switch[aria-checked="true"] {
  background-color: #d0f35e;
}
button.switch[aria-checked="true"] > div:after {
  background-color: #86af00;
}
button.switch[aria-checked="false"] {
  background-color: #ffffff;
  left: 18px;
}

<Switch
            
            className="switch"
            sx={{ width: "30px", height: "15px" }}
            checked={switched}
            onClick={() => toggleSwitch()}
          />