Emotion JS：如何在鼠标悬停在父元素时应用样式到子元素？

Question

似乎这个问题已经以不同方式被问答和回答了很多次，但我看到的答案要么与情感无关，要么与情感相关的答案对我没有用。 我正在使用@emtion/core@10.0.28和@emtion/styled@10.0.27.

基本上我想在父元素悬停/活动/聚焦时对子组件应用样式。 父元素是一个按钮，子元素是一个可选图标。 以下样式是通过styled语法添加到（父）按钮中的。

const iconWrapperStyles = (props) => {
  return css`
    ${props.IconWrapper} {
      width: ${iconSizeMedium};
      height: ${iconSizeMedium};
      margin-left: ${spacingSizeSmall};
      color: ${textColor};
      fill: ${textColor};
      background: ${backgroundColor};
      border-color: ${borderColor};
    }

    &:hover:not(:disabled),
    &:focus:not(:disabled),
    &:active:not(:disabled) ${props.IconWrapper} {
      outline: none;
      color: ${textColorHover};
      fill: ${textColorHover};
      background: ${backgroundColorHover};
      border-color: ${borderColorHover};
    }
  `;
};

第一段样式成功应用。因此，乍一看，按钮和子图标似乎已经正确地设置了样式。但是，当您悬停/聚焦/活动化按钮时，图标不会改变。我尝试了上面的实现，以及... + ${IconWrapper}和... & ${IconWrapper}；对于我来说这三个都失败了。官方文档表明，&应该管用。 官方文档

- Kwhitejr

Answer 1

无论使用哪种JS框架，以下内容都应该适用。

button {
  background: darkblue;
  color: white;
  border: none;
  padding: 5px;
}

button:hover i {
  color: red;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<button>
  <i class='icon-edit'></i> Click to edit
</button>

在你的情况下，它变成了：

   ${props.IconWrapper} {
     width: ${iconSizeMedium};
     height: ${iconSizeMedium};
     margin-left: ${spacingSizeSmall};
     color: ${textColor};
     fill: ${textColor};
     background: ${backgroundColor};
     border-color: ${borderColor};
   }

   &:hover:not(:disabled) ${props.IconWrapper},
   &:focus:not(:disabled) ${props.IconWrapper},
   &:active:not(:disabled) ${props.IconWrapper} {
     outline: none;
     color: ${textColorHover};
     fill: ${textColorHover};
     background: ${backgroundColorHover};
     border-color: ${borderColorHover};
   }

- Ruben Helsloot

---

这个答案不完全正确，但它给了我提示！你的解决方案有误，因为IconWrapper不是父级，所以你声明的hover等样式仅限于IconWrapper，这也是我最初的问题。请等待我马上添加的答案。 - Kwhitejr

好的，很高兴能帮忙！我会更新我的答案以匹配它。 - Ruben Helsloot

Answer 2

我失败了，因为我的 CSS 不够强。逗号分隔的 CSS 修饰符不能迭代最终声明的元素。

从这个角度来看...

&:hover:not(:disabled),
&:focus:not(:disabled),
&:active:not(:disabled) ${props.IconWrapper} {
  outline: none;
  color: ${textColorHover};
  fill: ${textColorHover};
  background: ${backgroundColorHover};
  border-color: ${borderColorHover};
}

到这个...

&:hover:not(:disabled) ${props.IconWrapper}, // include child el
&:focus:not(:disabled) ${props.IconWrapper}, // include child el
&:active:not(:disabled) ${props.IconWrapper} {
  outline: none;
  color: ${textColorHover};
  fill: ${textColorHover};
  background: ${backgroundColorHover};
  border-color: ${borderColorHover};
}

- Kwhitejr

---

感谢 @rubenhelsloot 让我找对了方向。 - Kwhitejr