“样式组件”的样式技术中“&&”和“&”有什么区别？

Question

我尝试更改以下代码。我将 LabelText 样式中的“&&”更改为“&”。但我不知道，例如，为什么检查输入（Arman）时输出中的第一个标签是“蓝色”。而预计它会是“红色”。也许，因为我不知道单 & 符号和双 & 符号 ('&&' v &') 之间的区别。

在styled-components文档中，“&”指的是组件的所有实例，“&&”指的是组件的实例。

这些之间到底有什么区别？

代码：

const Arman = styled.input.attrs({ type: "checkbox" })``;

const Label = styled.label`
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
`

const LabelText = styled.span`
  ${(props) => {
    switch (props.$mode) {
      case "dark":
        return css`
          background-color: black;
          color: white;
          ${Arman}:checked + & {
            color: blue;
          }
        `;
      default:
        return css`
          background-color: white;
          color: black;
          ${Arman}:checked + & {
            color: red;
          }
        `;
    }
  }}
`;

render(
  <React.Fragment>
    <Label>
      <Arman defaultChecked />
      <LabelText>Foo</LabelText>
    </Label>
    <Label>
      <Arman />
      <LabelText $mode="dark">Foo</LabelText>
    </Label>
    <Label>
      <Arman defaultChecked />
      <LabelText>Foo</LabelText>
    </Label>
    <Label>
      <Arman defaultChecked />
      <LabelText $mode="dark">Foo</LabelText>
    </Label>
  </React.Fragment>
)

输出：

Answer 1

我们使用 2 个 & 符号的原因是因为特异性很重要。有时，现有的类（例如 Bootstrap 中的类）可能有很多特殊性。使用 && 将样式应用到组件两次，这通常足以覆盖被覆盖的类中已存在的内容。