Semantic-ui-react: Sticky: div does not inherit z-index

[Vino4]

Bug Report

The <Sticky/> seems to create a <div> containing another <div>. When scrolling, the inner <div> renders the child component with style properties such as fixed position, responsive width and a 0px top attribute.
The problem is that when you set a z-index by any means possible to the <Sticky/> component then it does not pass them to the inner <div> that it creates which happens to be the bound <div>.

Steps

• Place any <div> or component inside a <Sticky/> component.
• Set a higher z-index in the <div> you created and/or the <Sticky/> component. This can be done either inline or through the use of classes/external css sheets.

Expected Result

The <Sticky/> component would be in-front of neighboring components since it has a higher z-index.

Actual Result

The <Sticky/> component appears behind the neighboring components regardless of the z-index setting, with the exception of some components such as <Header/> that appear behind the <Sticky/> component.

Version

0.81.1

Testcase

https://codesandbox.io/s/03pxm53j6v

[lovvtide]

Hey guys, I was having the exact same issue but I found a workaround for now. You can use the onStick() callback for the sticky element to dynamically set the z-index of the inner div. Hope that helps, cheers!

<Sticky context={contextRef} onStick={() => { contextRef.children[0].children[1].style.zIndex = 1000; }}>