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

编程问答 2022-08-11

问题描述

如棱角分明的官方文档所述，::ng-deep,>>>,/deep/已过时，将很快被删除：

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

如果我使用mat之类的<mat-checkBox>组件，或者像<mat-table>之类的更全面的组件，我该如何从父级对该组件进行一些更改？

  1. 我应该取消该组件的视图封装并编写 .SCSS文件中的样式？
  2. 如果要删除深选择器，如何编辑inner材质角度分量的样式？
  3. 正确的方法是什么？

解决方法

正如提到的文档所述，您可以将::ng-deep与:host结合使用，这样就可以了。

为了将指定的样式作用于当前组件及其所有后代，请确保在:host之前包括::ng-deep选择器。如果在没有::ng-deep伪类选择器的情况下使用:host组合器，则样式可能会渗入其他组件

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

但是，您还可以使用自定义CSS 类和 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

angularangularng-deepstyles