了解样式组件组件选择器和与号

Question

在 styled-components 文档中，他们有这个例子：

https://www.styled-components.com/docs/advanced#referring-to-other-components

它显示了一个图标，当您将其悬停在其父级（在本例中为链接）时会改变颜色。

const Link = styled.a`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
`;

const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover & {         // <---- This is what I'm not understanding
    fill: rebeccapurple;
  }
`;

从文档中，我们知道：

Doc Note #1： styled-components 通过“组件选择器”模式干净地解决了这个用例。每当一个组件被 styled() 工厂函数创建或包装时，它也会被分配一个稳定的 CSS 类用于定位。

还有：

文档注释 #2：与号 (&) 被我们为该样式组件生成的唯一类名替换，从而易于拥有复杂的逻辑。

---

我们来分析一下 ${Link}:hover &

我知道它被翻译成浏览器：

和：

我知道这sc-kAzzGY是一个“稳定的 CSS 类”（Doc Note #1），每当一个元素被styled函数包装时就会创建它。

我还知道与号 (&) 被它们为该样式组件生成的唯一类名（文档注释 #2）替换。因此，kDmLky是那个班级。

题

但是结果选择器（下图）实际上选择的是什么？有人可以向我解释一下吗？

Answer 1

${Link}指向const Linkie：“悬停我的父母改变了我的风格”，它得到了sc-kAzzGY.

&有点像说“并将其添加到当前的类/id/等中。” 所以，

.my-class {
 some-css: awesomeness;
 &:hover {
   more-css: extra-cool;
 }
}

相当于：

.my-class {
 some-css: awesomeness;
}
.my-class:hover {
   more-css: extra-cool;
}

因此，&指向包含元素const Icon，即对话气泡，并得到 的类kDmLky。

当Link悬停时，导致Icon有fill: rebeccapurple

编辑：

只是为了澄清一些事情：

当一个声明块位于另一个声明块内部时（如下例所示），该内部声明块将成为一个独立的声明块。

const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover & {       // This declaraition block becomes an independent one
    fill: rebeccapurple;
  }
`;

在本例中，结果是一个声明块，其中的选择内容如下：

当您的类&是${Link}该状态中的类的后代时hover，请应用以下规则：

fill: rebeccapurple;

注意： ${Link}指的是 Link 类，&指的是 Icon 类（svg）。