有没有办法使用 Angular 方法来控制在组件的根级别定义的 CSS 变量？在 JavaScript 中，当我们设置在根级别时，我们有 document.documentElement.style.setProperty()。
在 Angular 中，我们可以使用 ':host' 来声明 css 变量以在组件内进行全局访问吗？还是我们需要使用类似'::ng-deep :root'的东西？
以下问题也仍未得到解答： Angular: Use Renderer 2 to Add CSS Variable
【问题讨论】：
是的，您可以在根范围内设置变量：
: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/ 或 >>> 已被弃用。
在此处了解更多信息：special css selectors in angular
只是一个附加信息。 它在 ':root' 和 ':host' 中都有效 我们可以通过以下方式为它们设置值：
constructor(private elementRef: ElementRef) { }
然后
this.elementRef.nativeElement.style.setProperty('--color', 'red');
【讨论】：
在组件中使用 css 变量的最具建设性和模块化的方式（使用 viewEncapsulation）如下：
// 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 已被弃用，但它还没有被替换（并且没有替换），可以在几个discussion like this 中阅读
【讨论】：
不使用 ::ng-deep（为所有子项设置 bg）对每个组件（例如背景颜色）的最佳选择
导入以下内容
import {ElementRef} from '@angular/core';
在构造函数中声明元素引用
constructor(private elementRef: ElementRef) {}
然后调用函数ngAfterViewInit()
ngAfterViewInit(){
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
}
这会将 bg 设置为白色，但您也可以将其替换为十六进制颜色，因此您可以对每个组件执行此操作
【讨论】：