基于父CSS状态的条件子动画（使用React的样式组件）

Question

对于React styled-components，是否有像

这样的替代品

.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 &之类的东西在多个父母拥有条件类（.active和.inactive这里）的情况下会产生副作用。然后另一种选择是pass React props to descendants for conditional styling with styled-components。

geleen（维护者）对gitter的回答。在这里添加完成和google-fu。