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

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

希望有帮助。

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];

Answer 5

更改垫子单选按钮的颜色将以下内容粘贴到您的模块中。

单选按钮的默认颜色可以使用全局配置 MAT_RADIO_DEFAULT_OPTIONS 提供商

供应商：[{ 提供：MAT_RADIO_DEFAULT_OPTIONS， useValue: { color: 'primary' }, }]