CSS变量和Angular 5

Question

我正在尝试在我的Angular应用程序中使用css varible,在子组件中,它只是不起作用.在浏览器的Elements工具(我使用Chrome最新版本)中,var()不执行任何操作.expamle:

css文件:

:root {
  --width: 43.75%;
}

#content {
  display: grid;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: 90%;
  grid-gap: 3px;
  align-content: center;
  justify-content: center;
  border: 2px solid black;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

这就是它在浏览器中的显示方式:

CSS变量是否可以与Angulat一起使用？谢谢

Answer 1

您的根选择器可能也会获得带有角度组件ID的属性.

试试这个

::ng-deep :root {
  --width: 43.75%;
}

Answer 2

我知道这是旧的，但比 ::ng-deep 更好的解决方案是使用 :host 。这将避免稍后在 ::ng-deep 被弃用时出现问题。

:host {
  --width: 43.75%;
}