理解样式组件组件选择器和&号

Question

在样式化组件文档中，它们有以下示例：

https://www.styled-components.com/docs/advanced#referring-连接到其他组件

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

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

从文件中，我们知道：

文档注释#1：样式化组件通过“组件选择器”模式清晰地解决了这个用例。每当一个组件被styled（）工厂函数创建或包装时，它也会被分配一个稳定的CSS类以用于定位。

还有那个：

注#2：&（

让我们分析${Link}：悬停

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

以及：

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

我还知道，符号(

问题

但最终的选择器（下图）实际选择的是什么？谁能给我解释一下吗？




Answer 1

${Link}:hover &

这是符号

${Link}:hover ${Icon}

i、 e.它是指一个图标组件，包含在悬停在其上的链接组件内部

我还推荐这个链接来查看具有样式化组件的组件选择器的更通用的用例，其中它用于父子配置中的选择，并应用于子配置

Answer 2

${Link}指向const-Link，即：“悬停我的父项会改变我的风格”，它得到一个类sc-kAzzGY。

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

相当于：

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

因此，

当链接悬停时，使图标具有填充：Rebeccapulle

编辑：

只是为了更清楚一点：

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

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}指的是链接类和