Css 情感JS：当鼠标悬停在父对象上时，如何将样式应用于子对象？

似乎这个问题有很多不同的提问和回答方式，但我看到的答案要么不适用于情绪，要么与情绪相关的回答对我不起作用。我在玩游戏/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}

；对我来说这三个都失败了。指出

&

应该可以工作。

无论JS框架如何，以下内容应该始终可以工作

按钮{
背景：深蓝色；
颜色：白色；
边界：无；
填充物：5px；
}
按钮：悬停i{
颜色：红色；
}

单击以编辑

我失败了，因为我的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};
}

---

这个答案不太正确，但它确实给了我线索！您的解决方案已关闭，因为IconWrapper不是父项，所以您声明的悬停等样式仅局限于IconWrapper，这是我最初的问题。请回答我很快会补充的。好的，很好，很乐意帮忙！我将更新我的答案以匹配它，然后感谢@rubenhersloot让我走上正确的轨道