Recusrively Nested Accordion Chevron Animation

[GiuseppeIII]

I am having trouble getting recursively nested accordion chevrons to animate correctly. They seem to take the data-state from the original Accordion.Item and not their direct parent's Accordion,Item.

See here for example of the issue: https://codesandbox.io/s/cool-brook-m7sznz
(Notice the chevrons are always in the position of the top level element whether or not they are opened)

Any help on this would be greatly appreciated, thanks! 😄

Answer: Put a namespace on the trigger: [${AccordionTrigger}[data-state=open] &]: to get the correct data-state

[benoitgrelard]

Good ol' CSS specificity 🙂
Worth noting, another way is to make it more specific with the > selector like you have in the linked demo at the moment above:

"[data-state=open] > &": { transform: "rotate(180deg)" }