如何更改 mat-radio-outer-circle 的颜色（角材料）答案

【问题标题】：How to change the color of mat-radio-outer-circle (angular material)如何更改 mat-radio-outer-circle 的颜色（角材料）
【发布时间】：2020-08-07 18:01:48
【问题描述】：

我想更改角材料中的单选按钮颜色，默认值为“accent”，我想设置此值#ff9800，我在 SO，Angular 6 Material - Hues and How to change the color of mat radio button 中找到了这个解决方案，但是 .mat-radio -outer-circle 它的值保持在重音中，我的问题是如何在选中单选按钮时更改它的值（#ff9800）。这是我的 css 和 html 代码。

/* border-color:rgb(66, 134, 244); */ 
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { 
    color:#ff9800; 
    border-color: #ff9800;
}

::ng-deep.mat-radio-button.mat-accent .mat-radio-inner-circle{
    color:#ff9800;
    background-color:#ff9800;
  }

::ng-deep.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:#ff9800;
}

<mat-radio-group aria-label="Select an option" class="actions" [(ngModel)]="action"
                [ngModelOptions]="{standalone: true}">
         <mat-radio-button value="Compile" checked ="true" color="accent">Compile</mat-radio-button>
         <mat-radio-button value="Check Syntax" color="accent">Check Syntax</mat-radio-button>
</mat-radio-group>

【问题讨论】：

我真的不明白什么不适合你，请提供一个最小的可重现示例（stackblitz）。
你能把ng-deep删掉试试看吗？

标签： angular-material2

【解决方案1】：

您应该在border-color 和background-color 的值之后使用!important 规则，如以下代码：

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: #ff9800 !important;
}

//before checked:

::ng-deep .mat-radio-button.mat-accent .mat-radio-outer-circle {
    border-color: green !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: green !important;
}

//after checked:

::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
    .mat-radio-outer-circle {
    border-color: #ff9800 !important;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
    .mat-radio-inner-circle {
    background-color: #ff9800 !important;
}

【讨论】：