javascript - 基于父 CSS 状态的条件子动画（带有用于 React 的样式组件）

Question

对于styled-componentsReact，是否有任何替代方案

.btn:hover:not(.inactive)>.btn-top,
.btn.active:not(.inactive)>.btn-top {
  z-index: 2;
  /* transform here */
}
.btn:hover:not(.inactive)>.btn-bottom,
.btn.active:not(.inactive)>.btn-bottom {
  z-index: 1;
  /* transform here */
}

（使用嵌套条件选择器来确保所有动画在同一个 DOM，但不同的 z-index 级别正确运行/完成）？

（对不起标题长度。没有代表创建样式组件标签。）

Answer 1

:hover:not(.inactive) > &, .active:not(.inactive) > &用作（Sass）选择器。

谨慎使用。在多个父母有条件类（和这里）的情况下，类似的东西.active &可能会产生副作用。然后，另一种选择是将React 道具传递给后代以使用..active.inactivestyled-components

geleen（维护者）在 gitter 上回答。在此处添加以完成和 google-fu。