Emotion JS：悬停父级时如何将样式应用于子级？答案

【问题标题】：Emotion JS: How to apply styles to child when hover parent?Emotion JS：悬停父级时如何将样式应用于子级？
【发布时间】：2020-11-16 03:04:18
【问题描述】：

似乎有人以多种不同的方式提出并回答了这个问题，但我看到的答案要么不适用于 Emotion，要么与 Emotion 相关的答案对我不起作用。我在@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}；这三个对我来说都失败了。 Official docs 表示 & 应该可以工作。

【问题讨论】：

标签： css emotion

【解决方案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};
   }

【讨论】：

这个答案不太正确，但它确实给了我线索！您的解决方案已关闭，因为 IconWrapper 不是父级，因此您声明的悬停等样式仅本地化为 IconWrapper，这是我最初的问题。请回答我会尽快添加。
好的，很高兴为您提供帮助！然后我会更新我的答案以匹配它

【解决方案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};
}

【讨论】：

感谢 @rubenhelsloot 让我走上正轨