jiku jiku - 9 days ago 6
React JSX Question

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

With

for React, are there any alternatives to something like

.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 */
}


(using nested conditional selectors to ensure all animations at same DOM, but different z-index levels run/complete properly)?

(Sorry about title length. No rep to create styled-components tag.)

Answer

:hover:not(.inactive) > &, .active:not(.inactive) > & works as (Sass) selectors.

Use with caution. Something like .active & could have side-effects in cases where multiple parents have the conditional classes (.active and .inactive here). An alternative would then be to pass React props to descendants for conditional styling with styled-components.

Answered on gitter by geleen (maintainer). Added here for completion and google-fu.