如何更改子垫 angular 组件的样式？

Question

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

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

如果我正在使用 mat 组件，如 <mat-checkbox> 或更全面的组件，如 <mat-table>，我如何才能从父组件更改该组件？

我是否应该取消对该组件的视图封装并写入 .SCSS 个文件中的样式？
如果要删除 deep selector，我该如何编辑 inner material angular 组件的样式？
这样做的正确方法是什么？

Answer 1

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

In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components

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

但是，您也可以使用自定义 CSS class & id 来应用您的自定义 css .CSS 或 .SCSS 文件 Angular Material 组件。使用 .class 和 #id 结合 mat 默认 classes 是可行的。此外，您可以在组件样式文件（.CSS 或 .SCSS）中使用自定义 Angular material classes 来覆盖这样的内容：

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

所以，继续使用它，因为 Dudewad 也在这里提到：

如何更改子垫 angular 组件的样式？

How to change styles of child mat angular component?

css

styles

angular

ng-deep