问情感JS:当父母悬停时，如何将样式应用于孩子？
EN

Stack Overflow用户

提问于 2020-07-26 10:40:31

回答 2查看 4.6K关注 0票数 3

这个问题似乎被问了很多不同的答案，但我看到的答案要么不适用于情绪，要么与情绪有关的答案对我没有用。我正在使用@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}；这三个都失败了。官方文件表示&应该工作。

css

emotion

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-26 12:18:03

不管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};
   }

票数 1

Stack Overflow用户

发布于 2020-07-26 13:15:45

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