从 Angular 5 控制 CSS 变量

Question

有没有办法使用 Angular 方法来控制在组件的根级别定义的 CSS 变量？在 JavaScript 中，当我们设置在根级别时，我们有 document.documentElement.style.setProperty() 。

在 Angular 中，我们可以使用 ‘:host’ 来声明 css 变量以在组件内进行全局访问吗？还是我们需要使用’::ng-deep :root’之类的东西？

以下问题也仍未得到解答： Angular: Use Renderer 2 to Add CSS Variable

原文由 Srikanth Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以在根范围内设置变量：

 :root {
  --main-color: red
}

是的，您可以使用 :host 选择器来定位组件所在的目标元素。

 :host {
  display: block;
  border: 1px solid black;
}

您还可以使用 :host-context 来定位组件的任何祖先。 :host-context() 选择器在组件宿主元素的任何祖先中查找 CSS 类，直到文档根。

 :host-context(.theme-light) h2 {
  background-color: #eef;
}

注意： ::ng-deep 或 /deep/ 或 >>> 已被弃用。

在此处阅读更多相关信息： 角度中的特殊 css 选择器

只是一个额外的信息。它在 ‘:root’ 和 ‘:host’ 中都有效 我们可以通过以下方式为它们设置值：

constructor(private elementRef: ElementRef) { } 然后 this.elementRef.nativeElement.style.setProperty('--color', 'red');

原文由 ashfaq.p 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在组件（使用 viewEncapsulation）中使用 css 变量的最具建设性和模块化的方式是这样的：

 // global css
:root {
   --main-color: red
   --alt-color: blue
}

// inside component component css
::ng-deep :root {
   --specific-css-var: var(--main-color)
}
:host {
   background-color: var(--specific-css-var)
}
:host(.conditional-class) {
   --specific-css-var: var(--alt-color)
}

注意：尽管 ::ng-deep 已被弃用，但它还没有被替换（并且没有替换），可以在 这样的几个讨论 中阅读

原文由 Asaf Agranat 发布，翻译遵循 CC BY-SA 4.0 许可协议