css - 如何使用 React 组件避免 z-index 错误

Question

我正在开发一个基于 React 组件的 Web 应用程序，并且正在寻找避免 z-index 问题的任何策略。

传统上，我总是使用共享 SCSS 变量对索引进行分组，但是对于完全封装的 js 组件，这有点棘手。

Answer 1

根据元素的设置方式，可以采用不同的方式来执行此操作。您是在构建步骤中使用 sass/sass-files 还是在 js 解决方案(styled-components、emotion 等)中使用 css？

如果你使用 sass，你仍然可以使用你的共享变量。只需确保通过导入包含 scss 变量声明的文件将这些变量暴露给组件的 scss 文件。

如果您使用 css-in-js，那么您正在使用的库可能有一个解决方案。您也可以像这个人那样寻求或多或少的自定义解决方案:https://fatfisz.com/blog/solving-z-index-with-styled-components

如果你使用 vanilla css，你总是可以使用 css 自定义属性并添加你的 z-index 层:

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

这些只是解决问题的一些建议。没有更多的上下文，很难得到更具体的答案。