css - 如何根据 Angular 中的全局 CSS 类名调整组件的 CSS？

Question

我们在html-element 上使用一个类来确定用户是否处于应用程序中dark或light模式。

<html class="dark-mode"></html>

此类是Renderer2在检测用户所选设置的服务中添加的。到目前为止，这工作正常。

现在，我们必须调整所有组件，使其在黑暗模式下也看起来不错。但问题是 Angular 的ViewEncapsulation.

我们认为会派上用场的是简单地更新组件的 SCSS：

.headline {
    color: black;

    .dark-mode & {
      color: white;
    }
}

或者在纯 CSS 中：

.headline {
  color: black;
} 

.dark-mode .headline {
  color: white;
}

现在这不起作用，因为该类.dark-mode似乎已按预期进行了封装。

我们如何解决这个问题？

score 1 · Accepted Answer

:host-context提供对以上 css 类的访问:host。通过使用:host-context，您可以检查主机的任何父母是否具有特定的 css 类并应用样式：

:host-context(.dark-mode) h2 {
  color: white;
}

1 回答 1