Z-Index

[pmorim]

Is your feature request related to a problem? Please describe. I tried to render the arrow behind a component by doing something like this:

<XArrow passProps={{ style: { zIndex: -1 } }} ... />

But it doesn't work. Is there any way to do it at the moment?

Describe the solution you'd like There should be a zIndex prop that would be passed to the svg components of the arrow. Something like this:

<XArrow zIndex={-1} ... />

Describe alternatives you've considered

• I tried changing the order they were rendered, but I need to create the start and end refs dynamically, therefore, I need to render the components before I render the connection between them (I'm using use-dynamic-refs for this).
• I also tried setting opacity to 0.99 to see if the problem was with a Stacking Context, but it didn't work.

Additional context I want a way for the connection to be displayed behind the little gray circles.

I'm using this library for a university project, so I really need a solution for this, even if it is just a hacky workaround.

[BKurzawa]

@pmorim Try using divContainerStyle={{ zIndex: -1}}

[pmorim]

@BKurzawa thank you, you are a lifesaver. But I still think there should be a zIndex prop.

[Eliav2]

does divContainerStyle={{ zIndex: -1}} worked perfectly it your case? considering adding this prop because it is common to use in arrow component @pmorim

[Eliav2]

suggestion accepted

[Eliav2]

added in dev branch