Configure z-index

[mattfelten]

It looks like there's a default z-index of 99 to all instances of react-stick. I need to raise that to a higher z-index in my project. Is there any way to make this configurable?

[yakunins]

@mattfelten There is a className availiable for Stick, so you may override z-index with it.

In react-stick v3.0.3 class has suffix __node:

In a previous react-stick v2.3.0 a className that been applied to Stick, was passed (with a suffix) into all the wrappers:

In both versions style prop applied to Stick seems to be ignored.

[frontendphil]

Hey there. It seems like in order to get this to work (again?) you need to nest the styles.

style={{
  node: {
    zIndex: 1000
  }
}}

I'm looking into whether we should have mentioned that in the release notes.

[mattfelten]

Including that in release notes, or even better, an example in the Readme of how to customize more of the internal components would be great. If I didn't look into the code and see it's using substyle, then subsequently looked up substyle to see what it was, the above format would look like magic to me.

[frontendphil]

I didn't have time so far. But you're right. First off the way of styling shouldn't have changed. The major bump was only done because we required a react version that supports hooks now. The API should have stayed stable. But we might have missed the styling part since this has never been documented. I'll make a note to hopefully do that this week. That might also help some teams in our company :D

[frontendphil]

In one of the latest versions, we started to export the PortalContext component. You can use this, for instance, in Modal components to anchor the stick nodes inside the modal instead of the body component. You can make this part of any modal component you might have so that Stick components inside it "just" display correctly and you don't have to fiddle around with z-index.