使用styled-components修改Antd Switch背景色不生效的原因

• 选择器逻辑写错了：你代码里写的.ant-switch-checked是后代选择器，只会匹配当前styled生成的根元素内部的子孙元素，但ant-switch-checked这个类名是antd直接加在Switch组件根节点上的，和styled-components生成的类名在同一个DOM元素上，后代选择器根本匹配不到元素自身的类。
• 这段代码编译后生成的CSS选择器大概是.sc-xxxx .ant-switch-checked，语义是「查找class为sc-xxxx的元素内部，所有带ant-switch-checked类的后代元素」，和实际DOM结构完全不符，自然不会生效。
• 额外注意：Antd 5版本基于CSS-in-JS实现，默认样式有自身的优先级权重，如果你的选择器权重和默认样式持平，也可能因为加载顺序被覆盖。

用&符号指代当前styled-components生成的根元素类名，写成交集选择器，匹配根元素自身带ant-switch-checked类的选中状态即可：

import styled from 'styled-components';
import { Switch as SwitchAnt } from 'antd';

export const Button = styled(SwitchAnt)`
  /* & 代表当前Switch组件的根节点，匹配自身同时带有ant-switch-checked类的状态 */
  &.ant-switch-checked {
    background-color: red;
  }
`

如果写完还是被默认样式覆盖，可以提升选择器权重，必要时加!important强制生效：

export const Button = styled(SwitchAnt)`
  &&.ant-switch-checked {
    background-color: red !important;
  }
`

你提到把样式写在Switch外层容器可以生效，本质是外层容器的后代选择器确实能选中内部的Switch根节点，和你最初写错的选择器匹配逻辑完全不同。

内容的提问来源于stack exchange，提问作者OnceUponTime