如何更改子垫角组件的样式？答案

【问题标题】：How to change styles of child mat angular component?如何更改子垫角组件的样式？
【发布时间】：2020-09-09 06:55:29
【问题描述】：

正如 Angular 官方文档所说，::ng-deep , >>>, /deep/ 已被弃用，很快将被删除：

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

如果我使用mat 组件，例如<mat-checkbox> 或更全面的组件，例如<mat-table>，我怎么能从父组件中对该组件进行一些更改？

我是否应该取消该组件的视图封装并写入 .SCSS 文件中的样式？
如果deep selector要被移除，我该如何编辑inner材质角度组件的样式？
这样做的正确方法是什么？

【问题讨论】：

标签： css angular styles ng-deep

【解决方案1】：

正如提及文件所说，您可以使用::ng-deep与:host的组合，这样就可以了。

为了将指定样式的范围限定为当前组件及其所有后代，请务必在::ng-deep 之前包含:host 选择器。如果在没有 :host 伪类选择器的情况下使用 ::ng-deep 组合器，则样式可能会渗透到其他组件中

:host /deep/ h3 {
  font-style: italic;
}

但是，您也可以使用自定义 CSS class 和 id 将自定义 css 应用于 上的 .CSS 或 .SCSS 文件角材料组件。使用.class 和#id 与mat 默认类结合使用。此外，您可以在组件样式文件（.CSS 或 .SCSS）中使用自定义 Angular 材质类来覆盖如下内容：

.app-component-style {
/* All the CSS here */
.mat-tab-group .mat-tab-label {color: green;}
}

所以，请继续使用它作为 Dudewad 提及这里： https://stackoverflow.com/a/49308475/4185370

【讨论】：

感谢您的详细解答。马上阅读并尝试一下。那么， ::ng-deep 和 :host 不会被弃用吗？我只担心这个
::ng-deep 和:host 不会干扰模板封装，所以可以使用。由于目前没有其他选择，所以没关系。使用它，不用担心。