CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
jiku
jiku

Reputation: 293

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

With styled-components 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.)

Upvotes: 0

Views: 699

Answers (1)

jiku
jiku

Reputation: 293

: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.

Upvotes: 1

Related Questions