为 CSS 范围设定生成的 Angular 属性未应用于组件的内部元素

Generated Angular attributes for CSS scoping not getting applied to inner elements of components

Angular 生成属性并且似乎仅将它们应用于您在模板中声明的元素。组件附带的任何其他 HTML 元素(在我的例子中,angular-material 的 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 元素设置样式。

有没有什么方法可以从我的组件文件中实现这一点(不求助于站点范围的样式表)?

您必须使用 ::ng-deep 而不是 /deep/,这似乎已被弃用。

mat-form-field ::ng-deep *

根据文档:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

你可以找到它here