如何设计Antd组件
我正在使用ANTD库处理开关组件。我想更改开关的背景，因此我有以下代码：
import styled from 'styled-components';
import { Switch as SwitchhAnt } from 'antd';
export const Button = styled(SwitchhAnt)`
.ant-switch-checked {
background-color: red;
}
`
但是切换背景根本不会更改。我知道我可以将其包裹在某些容器中，但它会起作用，但是为什么类似的事情不起作用？
I am working on Switch component with antd library. I would like to change background of switch, so I have following code:
import styled from 'styled-components';
import { Switch as SwitchhAnt } from 'antd';
export const Button = styled(SwitchhAnt)`
.ant-switch-checked {
background-color: red;
}
`
But switch background does not change at all. I know I can wrap this in some container and it will works but why something like that does not works?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
根据引擎盖下样式组件的工作方式，
它通过将散列样式散布到一个看似随机的字符串中，例如 dkamqw 或 iDWMSQ 。
然后将新的CSS类注入页面中，使用将字符串作为其名称，并包含来自样式字符串的所有CSS声明。您可以看到，当您检查Switch Switch时，已应用样式课程。
正常的ANTD开关
样式的ANTD开关
因此，在这里您无需添加ANTD使用的类名。只需要添加需要以下类似的CSS属性即可。
您可以在
您还可以参考 demySovifying-styled-styled-styled-components https://medium.com/styled-components/how-styled-components-works-works-works-618a69970421“ rel =“ nofollow noreferrer”>“ nofollow noreferrer”> sypyled-components-works-works-works 以获取有关更多详细信息，以获取有关在下面使用的详细信息兜帽。
As per how styled components work under the hood,
It creates a unique class name by hashing styles into a seemingly-random string, like dKamQW or iDwMsQ.
Then inject a new CSS class into the page, using that hashed string as its name, and containing all of the CSS declarations from the styles string. You can see that when you inspect switch that different style classes have been applied.
Normal antd Switch
Styled antd Switch
So here you don't need to add the class name used by antd. Just only need to add CSS properties that need to have like below.
You can check example codesandbox in here.
You can also refer demystifying-styled-components and how-styled-components-works for more details about what styled components do under the hood.