styled-components中&与&&的样式写法区别及选中态颜色异常问题

核心差异 #

• 单&：是CSS预处理器的父选择器占位符，指代当前styled组件生成的类选择器，最终生成的样式规则是全局生效的，所有匹配选择器结构的该组件实例都会命中规则。同权重的样式规则，后声明的会覆盖先声明的。
• 双&&：本质是提升当前样式规则的优先级，编译后会将当前组件的类名重复两次（比如.sc-xxx.sc-xxx），优先级高于单类选择器的规则，且仅会命中对应props配置的当前组件实例，不会和其他同组件的不同props实例的样式规则互相覆盖。

这也就是官方文档中描述的「&指代所有实例、&&指代单个实例」的实际含义。

样式异常原因 #

你使用单&时，两种mode分支生成的最终CSS规则如下：

/* 默认mode分支生成的规则，先声明 */
.Arman:checked + .LabelText {
  color: red;
}
/* dark mode分支生成的规则，后声明 */
.Arman:checked + .LabelText {
  color: blue;
}

两条规则的选择器权重完全相等，CSS的层叠规则中后声明的规则优先级更高，因此所有匹配Arman勾选+紧邻LabelText结构的元素，都会命中后声明的蓝色规则，哪怕是默认mode的实例也会被覆盖，这就是第一个标签文本变成蓝色的原因。

如果将&替换为&&，最终生成的规则会变成：

/* 默认mode实例对应的规则 */
.Arman:checked + .LabelText.sc-abc123 {
  color: red;
}
/* dark mode实例对应的规则 */
.Arman:checked + .LabelText.sc-def456 {
  color: blue;
}

不同props的LabelText会生成不同的专属类名，两条规则的权重更高且只会匹配对应props的实例，不会互相覆盖，就能得到预期的红色/蓝色效果。

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