React-popper: z-index?

[chrisdrackett]

My poppers are often showing up under other elements on the page. I'm trying to figure out a way to add a z-index to the popper, but figured it was worth asking here in case others have already solved this issue

[FezVrasta]

z-index is a sensitive problem and must be handled properly case by case.

That's why Popper.js doesn't set any z-index by default.

You should really end up with the best solution for you and manually set them I think.

[souporserious]

@chrisdrackett this was the exact reason for making everything compose-able :) you can add an inline style, classname or whatever you want.

I take an approach like this for any personal settings I want for components:

const MyPopper = ({ style, ...props }) => (
  <Popper style={{ zIndex: 100, ...style }} {...props}/>
)