如何修改Angular Material组件的font-weight属性（SCSS覆盖无效）

这种情况大多是因为Angular的样式封装机制阻止了组件内的样式渗透到Angular Material的子组件，或者你的选择器优先级不够打不过Material的默认样式。试试下面几种方法：

方法1：使用::ng-deep穿透样式封装 #

在你的组件.scss文件里，用::ng-deep打破样式隔离，确保你的样式能作用到mat-radio-button内部的文本元素：

::ng-deep .example-radio-button mat-radio-button .mat-radio-label-content {
  font-weight: 400;
}

如果还是不生效，可以临时加!important强制覆盖（尽量少用，但紧急情况下管用）：

::ng-deep .example-radio-button mat-radio-button .mat-radio-label-content {
  font-weight: 400 !important;
}

方法2：在全局样式文件中定义样式 #

如果你不想用::ng-deep（官方提示它未来可能被废弃），可以把样式写到项目根目录的styles.scss里，全局样式不受组件封装限制：

.example-radio-button mat-radio-button .mat-radio-label-content {
  font-weight: 400;
}

方法3：提升选择器优先级 #

Angular Material的默认样式可能用了更具体的选择器，你可以通过增加父类嵌套来提升自己样式的优先级，比如结合你的容器类.form-group：

.form-group .example-radio-button mat-radio-button .mat-radio-label-content {
  font-weight: 400;
}

补充说明 #

Angular Material的单选按钮文本是包裹在.mat-radio-label-content这个类名的元素里的，直接选mat-radio-button可能不会命中文本元素，必须精准定位到承载文本的内层元素才能修改字体权重。

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