javascript - 了解样式化组件组件选择器和符号

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 solves this use case cleanly via the "component selector" pattern. Whenever a component is created or wrapped by the styled() factory function, it is also assigned a stable CSS class for use in targeting.

还有:

Doc Note #2: Ampersands (&) get replaced by our generated, unique classname for that styled component, making it easy to have complex logic.

---

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

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

和:

据我所知，sc-kAzzGY 是“稳定的 CSS 类”(文档注释 #1)，每当元素被 styled 函数包装时就会创建它。

我还知道，＆符号 (&) 被它们为该样式组件生成的唯一类名(文档注释 #2)所取代。因此，kDmLky 就是那个类。

问题

但是生成的选择器(下图)实际上选择了什么？谁能给我解释一下？

Answer 1

${Link} 指向 const Link 即:“Hovering my parent changes my style” 它获得了一个类 sc-kAzzGY。

& 有点像说“And 将其添加到当前类/id(s)/等”。所以，

.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

编辑:

只是为了更清楚一点:

当您在另一个声明 block 内部有一个声明 block 时，如下例所示，该内部声明 block 将成为一个独立的声明 block 。

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;
  }
`;

在这种情况下，结果是一个带有选择的声明 block :

当您有一个类 & 是处于 hover 状态的类 ${Link} 的后代时，应用这些规则:

填充:rebeccapurple;

注意: ${Link} 指的是 Link 类，& 指的是 Icon 类 (svg)。