为 CSS 作用域生成的 Angular 属性未应用于组件的内部元素答案

【问题标题】：Generated Angular attributes for CSS scoping not getting applied to inner elements of components为 CSS 作用域生成的 Angular 属性未应用于组件的内部元素
【发布时间】：2018-09-21 17:54:17
【问题描述】：

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选择器，所以mat-form-field ::ng-deep *应该做你想做的事
我认为 ::ng-deep 已被弃用 angular.io/guide/component-styles#deprecated-deep--and-ng-deep
@pnadalini 是，但该页面的官方建议是Until then ::ng-deep should be preferred for a broader compatibility with the tools.

标签： css angular angular-material angular-material-6

【解决方案1】：

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

mat-form-field ::ng-deep *

根据文档：

不推荐使用穿透阴影的后代组合器，支持被从主要浏览器和工具中删除。因此，我们计划放弃 Angular 中的支持（适用于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。直到那么 ::ng-deep 应该是首选，以获得更广泛的兼容性工具。

你可以找到它here

【讨论】：

一旦这三种方法被弃用，什么是首选方法？还有其他方法吗？
根据您添加的引用，我们应该更喜欢使用::ng-deep 而不是/deep/
首先我写了我脑海中的东西，但后来我意识到::ng-deep 是目前的首选。这就是我在回答中包含文档的原因。
您可能需要更新您的答案以遵循该建议
对不起，如果我的回答第一次具有误导性。我更新了。