如何更改Angular 6材质单选按钮的外部波纹颜色

Question

我想更改Angular Material单选按钮的默认颜色。我只能更改为单选按钮颜色。

<mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

但是，当我们单击选项时，我无法更改外部波纹效果的颜色。请有人帮我解决这个问题。

Answer 1

这是完全设置样式单选按钮的解决方案

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
        opacity: 0.5 !important;     /*click effect color change*/
        background-color: blue !important;
  }

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
        background-color: blue!important;   /*inner circle color change*/
  }

  ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }

希望是有帮助的。

Answer 2

自定义Angular材质的唯一方法是覆盖css规则，因此解决方案将是覆盖单选按钮的css波纹规则：

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
     background-color: rgba(0, 0, 0, .1) !important;
 }

Answer 3

我的默认主题为金色（白色），我需要将其更改为棕色（白色）。选择时，我需要内部和外部圆圈为棕色，未选择时需要外部圆圈为棕色。我还需要纹波效果来匹配。这是有效的结果：

  & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: brown !important; // Override material
  }

  & .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: brown !important; // Override material
    z-index: 3;
  }

  & .mat-radio-button .mat-radio-outer-circle {
    border-color: brown !important; // Override material
    z-index: 3;
  }

无需更改不透明度。

Answer 4

在我的情况下：

// CSS
:host ::ng-deep .mat-radio-button.mat-mycolor.mat-radio-checked .mat-radio-outer-circle {
  border-color: blue !important;
}

:host ::ng-deep .mat-radio-button.mat-mycolor .mat-radio-inner-circle {
  background-color: blue !important;
}

:host ::ng-deep .mat-radio-button.mat-mycolor .mat-ripple-element {
  background-color: blue !important;
}

// HTML
<mat-radio-group [(ngModel)]="selectedAction">
  <mat-radio-button [color]="radioColor" [style.color]="textColor" [value]="action" *ngFor="let action of actions">{{action}}</mat-radio-button>
</mat-radio-group>  

// TS
textColor: string = "#ff0000";
radioColor: string = "mycolor";
actions: string[] = ["Take a walk", "Mow the lawn"];
selectedAction: string = this.actions[0];