:root 选择器在 Angular 组件中不起作用

Question

我想尝试在我的 Angular 11 组件中使用 css 变量。

<div class="main-content">
  <a>Test Link</a>
</div>

有了这个app.component.css

div.main-content{
  --main-color: red
}

a{
  color: var(--main-color);
}

但如果我尝试在我的 css 链接中使用 :root 是黑色的。

:root {
  --main-color: red
}

a{
  color: var(--main-color);
}

:root 选择器匹配文档的根元素。

为什么在我的情况下它不匹配？

更新如果我将 :root 设置为默认的 styles.css 在全局包含的 Angular 项目中，一切正常。 我的app.component.css怎么了？

Answer 1

您不能在 Angular 组件中使用 :root 选择器，它根本不起作用，也不应该。查看https://github.com/angular/angular/issues/32177。