如何通過React組件避免Z-index錯誤

Question

我正在開發一個基於React組件的Web應用程序，並且正在尋找避免Z-index問題的任何策略。

傳統上，我總是使用共享的SCSS變量對索引進行分組，但是對於完全封裝的js組件，這有點棘手。

Answer 1

有多種方法可以執行此操作，具體取決於項目的設置方式。 您是在構建步驟中使用sass / sass-files還是為此使用了js解決方案中的css（樣式化組件，情感等）？

如果使用sass，您仍然可以使用共享變量。 只需確保導入包含scss變量聲明的文件，即可將這些變量公開給組件的scss文件。

如果您使用css-in-js，則您正在使用的庫可能為此提供了解決方案。 您也可以像這個家伙一樣尋求或多或少的自定義解決方案： https : //fatfisz.com/blog/solving-z-index-with-styled-components

如果您使用普通CSS，則始終可以使用CSS自定義屬性並添加z-index層：

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

這些只是如何解決該問題的指針。 如果沒有更多的上下文，就很難有一個更具體的答案。