How to avoid z-index bugs with react components

Question

I'm working on a react component-based web application and am looking for any strategies for avoiding z-index issues.

Traditionally I've always grouped my indexes using shared SCSS variables, but with fully encapsulated js components this is a bit tricky.

Answer 1

There are different ways of doing this depending on how your project is set up. Do you use sass/sass-files in your build step or are you using a css in js solution (styled-components, emotion, etc.) for this?

If you use sass you can still use your shared variables. Just make sure to expose those variables to your component's scss file by importing the file that holds the scss variable declaration.

If you use css-in-js then the library that you're using probably has a solution for exactly this. You can also go for a more or less custom solution like this guy did: https://fatfisz.com/blog/solving-z-index-with-styled-components

If you use vanilla css you can always use css custom properties and add your z-index layers:

:root {
  --overlay-layer: 2;
  --sidebar-layer: 3;
  --modal-layer: 4;
}

these are just a couople of pointers to how one could fix the issue. Wihtout more context it is difficult to have a more specific answer.