基于 parent CSS 状态的条件 child 动画（对于 React，styled-components）

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 级别不同 run/complete 正确）？

（抱歉标题太长了。没有代表创建 styled-components 标签。）

Answer 1

:hover:not(.inactive) > &, .active:not(.inactive) > & 作为 (Sass) 个选择器。

谨慎使用。在多个 parents 具有条件类的情况下，.active & 可能具有 side-effects（此处为 .active 和 .inactive）。另一种选择是 pass React props to descendants for conditional styling with styled-components.

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

基于 parent CSS 状态的条件 child 动画（对于 React，styled-components）

Conditional child animations based on parent CSS state (with styled-components for React)

javascript

css

reactjs

styled-components