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

Question

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

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

标签： cssreactjsuser-experience

Answer 1

根据您的项目的设置方式，有不同的方法可以做到这一点。您是在构建步骤中使用 sass/sass-files 还是为此在 js 解决方案（样式组件、情感等）中使用 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;
}

这些只是一些关于如何解决问题的指针。如果没有更多上下文，很难有更具体的答案。