Question

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

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

从文档中我们知道：

文档注释＃1：：样式化组件通过“组件”彻底解决了该用例选择器”模式。只要组件被创建或包装 styled（）工厂函数，还为其分配了稳定的CSS类用于定位。

还有：

文档注释2：“＆”号被我们生成的唯一类名替换为样式化的组件，使其易于拥有复杂的逻辑。

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

我知道它会被翻译为以下浏览器：

和：

我了解到sc-kAzzGY是“稳定的CSS类”（文档注释＃1），只要styled函数将元素包装元素，就会创建它。

我还知道，对于该样式化的组件，“＆”号（＆）被其生成的唯一类名（文档注释＃2）所取代。因此，kDmLky是该类。

问题

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

Answer 1

${Link}指向const Link，即：“悬停我的父母改变了我的风格”，这得到了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）。

Answer 2

${Link}:hover &

在这里，＆符是引用已定义的顶级组件的简便方法，因此我将其读为

${Link}:hover ${Icon}

即它是指链接组件中包含的Icon组件悬停在上面

我还建议this link查看带有样式化组件的组件选择器的更一般的用例，该用例在父子配置中用于选择并应用于子

了解样式化的组件，组件选择器和＆符

2 个答案: