如何修改Angular mat-radio-button未选中状态下的颜色

完全不需要修改整套Angular Material主题配置，通过组件样式穿透即可实现效果。

对应::ng-deep需要命中的类名 #

未选中状态下控制单选框边框样式的类是 .mat-radio-outer-circle，配合:not(.mat-radio-checked)伪类筛选出未选中的单选按钮即可，不会影响选中状态的默认样式。

可直接复用的代码 #

将代码写入对应业务组件的样式文件，替换颜色值为实际需要的色值即可：

/* 未选中状态常规态外圈边框颜色 */
::ng-deep .mat-radio-button:not(.mat-radio-checked) .mat-radio-outer-circle {
  border-color: #2563eb;
}

/* 可选：修改未选中状态hover时的外圈边框颜色 */
::ng-deep .mat-radio-button:not(.mat-radio-checked):hover .mat-radio-outer-circle {
  border-color: #1d4ed8;
}

/* 可选：如果需要修改未选中时的文字label颜色，加这段即可 */
::ng-deep .mat-radio-button:not(.mat-radio-checked) .mat-radio-label-content {
  color: #1f2937;
}

写法说明：不要把样式写到全局styles.css里，写在业务组件自身的样式文件中，哪怕::ng-deep目前被标记为待废弃，也不会出现全局样式污染的问题，是目前Angular项目中修改Material组件局部样式最通用的方案。

问题对应效果截图

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