Angular 12中mat-button样式移至styles.scss后部分不生效如何解决

问题产生原因 #

• CSS选择器优先级不足：Angular Material 内置的mat-button样式多使用.mat-button、a.mat-button这类选择器，和你全局定义的.menu-button类选择器权重相同。如果Material默认样式的加载顺序晚于你的全局自定义样式，就会覆盖你写的同名属性。
• Angular组件样式封装特性影响：此前样式写在组件内部时，Angular默认开启ViewEncapsulation.Emulated封装模式，会自动给组件内的所有样式添加唯一属性前缀（如[_ngcontent-xxx]），相当于额外提升了选择器权重，因此可以覆盖Material的默认样式。将代码迁移到全局样式文件后，没有该属性前缀加持，权重下降，无法覆盖默认样式。

解决方案 #

• 提升自定义选择器权重：将全局样式的选择器修改为更精确的匹配规则，比如针对a标签的按钮写为a.menu-button.mat-button，权重高于Material的默认选择器即可生效，示例代码如下：

a.menu-button.mat-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

• 调整样式加载顺序：在angular.json配置文件的build.options.styles数组中，将全局styles.scss的排序放在Angular Material样式路径的后方，同权重下后加载的样式会覆盖先加载的样式。
• 封装为公共组件：将该按钮封装为独立的公共组件，样式写在组件自身的SCSS文件中，需要使用的场景直接引入组件即可，既不需要重复编写代码，也能利用Angular的样式封装特性保证样式正常生效。
• （非必要不推荐）特殊场景下可以在需要覆盖的属性后添加!important强制提升优先级，该方法容易引发后续样式冲突，仅作为临时解决方案使用。

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