Как изменить цвет внешней пульсации радиокнопки 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;
 }