在Angular组件内重写Material样式类：是否全局生效或仅作用于当前组件？

问题1：在客户端组件内重写Angular Material全局样式类，是否会改变全局样式？ #

• 结果取决于组件的视图封装模式和样式写法：
  • 若使用Angular默认的Emulated视图封装，直接编写全局类名只会作用于当前组件模板内的对应元素，不会影响全局其他组件。因为Angular会给组件内的DOM元素添加专属属性，样式规则会自动绑定该属性，以此限制作用范围。
  • 若关闭了视图封装（设置encapsulation: ViewEncapsulation.None），或者使用::ng-deep穿透视图封装，重写的样式就会全局生效，影响所有用到该类的组件。

问题2：若在某组件内重写Angular Material的组件样式，该重写是否仅作用于该组件？举例说明：在app.component.css中编写如下扩展面板CSS代码： #

.mat-expansion-panel-spacing {
  margin: 0px;
}

在开启视图封装的情况下，该规则是否仅适用于app.component.html模板？

在默认开启Emulated视图封装的情况下，这个样式规则仅作用于app.component.html模板内的.mat-expansion-panel-spacing元素。

Angular会自动给app组件渲染的所有DOM元素添加类似_ngcontent-xxx的专属属性，同时把你编写的CSS规则转换成：

.mat-expansion-panel-spacing[_ngcontent-xxx] {
  margin: 0px;
}

这种带属性选择器的规则只会匹配带有该专属属性的元素，也就是app组件模板生成的元素，其他组件的对应元素没有这个属性，不会被该规则影响。

内容的提问来源于stack exchange，提问作者Ole