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

Posted 2023-03-15

【中文标题】基于父 CSS 状态的条件子动画（带有用于 React 的样式组件）

【英文标题】：Conditional child animations based on parent CSS state (with styled-components for React)

【发布时间】：2017-02-25 18:58:57

【问题描述】：

对于 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 级别正确运行/完成）？

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

【参考方案1】：

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

谨慎使用。在多个父母有条件类的情况下（.active 和 .inactive 这里），像.active & 这样的东西可能会产生副作用。然后，另一种选择是pass React props to descendants for conditional styling with styled-components。

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