基于父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这里）。 然后，一种替代方法是将React道具传递给后代，以使用styled-components进行条件样式styled-components 。

由Geleen（维护人员）回答。 为完成和google-fu在此处添加。