css - 如何更改 Angular 6 Material 单选按钮外部波纹颜色

Question

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

<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*/
  }

希望是有帮助的。