CSS范围生成的Angular属性未应用到组件的内部元素

Question

Angular会生成属性，并且似乎仅将它们应用于模板中声明的元素。组件附带的任何其他HTML元素（在我的情况下，是角材料的mat-form-field）都不会应用此属性。

这是设计使然吗？这样做的结果是，无法定位这些内部元素，因为您在组件的css文件中定义的任何类都将与Angular生成的属性串联。

就我而言

.mat-form-field * {
  border-radius: 0;
}

生成为：

mat-form-field[_ngcontent-c19] *[_ngcontent-c19] {
  border-radius: 0;
}

我的目标是为<mat-form-field>所组成的许多HTML元素中的某些元素设置样式。

是否有任何方法可以从组件的文件中实现此目的（无需求助于整个网站的样式表）？

Answer 1

您必须使用:: ng-deep代替/ deep /，这似乎已被弃用。

mat-form-field ::ng-deep *

每个文档：

  

不推荐使用穿刺后代组合器，并且支持   从主要的浏览器和工具中删除。因此，我们计划放弃   在Angular中支持（针对/ deep /，>>>和:: ng-deep的全部3种）。直到   那么:: ng-deep应该是首选，以便与   工具。

您可以找到它here