Nested accordion animated chevron

[gunnartorfis]

I'm displaying a nested chevron with, in theory, infinitely many nested headers so it's a recursive rendering.

Following this example: https://codesandbox.io/s/vkwlb?file=/src/App.js, one can notice that the chevrons aren't displayed inside the nested accordions. When chevrons are added in the nested accordions, they behave incorrectly: https://codesandbox.io/s/radix-nested-accordions-forked-fe11z?file=/src/App.js

It seems like the data-state is correct on the parent divs so I'm not sure how I can animate this correcly. Can someone help me out?

[benoitgrelard]

Hi @gunnartorfis,

Yeah this makes sense, it's because this rule is too generic as a data-state exists in a few places:

"[data-state=open] &": {
  transform: "rotate(180deg)",
  color: theme.colors.violet800.value
}

You could solve this by being more specific with what you are targetting:

-"[data-state=open] &": {
+[`${StyledButton}[data-state=open] &`]: {
  transform: "rotate(180deg)",
  color: theme.colors.violet800.value
}

[gunnartorfis]

Thank you so much for the help. Works like a charm.