Angular中如何去除mat radio button的hover悬停颜色？

你现有代码存在2个问题，修改后即可生效：

1. 你写的第三段选择器存在语法错误，.mat-和radio-outer-circle中间有换行，会导致选择器匹配失败，首先要把这个换行删掉。
2. 你现有代码只覆盖了选中态、点击态的样式，没有覆盖悬停、聚焦状态下的外框颜色和悬停波纹效果。

修正后的完整样式代码 #

/* 覆盖波纹效果（包含悬停、点击触发的波纹） */
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  opacity: 0 !important;
  background-color: transparent !important;
}

/* 选中态内圈颜色 */
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: blue !important;
}

/* 选中态外圈颜色 */
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: blue !important;
}

/* 覆盖悬停、聚焦状态下的外圈颜色，不需要变色的话保持和默认态一致即可 */
::ng-deep .mat-radio-button.mat-accent:hover .mat-radio-outer-circle,
::ng-deep .mat-radio-button.mat-accent.mat-radio-focused .mat-radio-outer-circle {
  border-color: blue !important;
}

/* 移除悬停时单选框容器的背景色 */
::ng-deep .mat-radio-button.mat-accent .mat-radio-container:hover {
  background-color: transparent !important;
}

可选优化方案 #

• 如果你不需要任何波纹效果，可以直接在mat-radio-button标签上添加[disableRipple]="true"属性，不需要额外写样式覆盖波纹。
• 如果样式还是不生效，可以在当前组件的@Component装饰器中添加encapsulation: ViewEncapsulation.None，需要提前从@angular/core导入ViewEncapsulation。

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