角度中的垫单选按钮颜色变化答案

【问题标题】：Mat Radio Button Color Change in Angular角度中的垫单选按钮颜色变化
【发布时间】：2021-01-20 03:58:55
【问题描述】：

更改 Angular 材质 mat-radio-button 的颜色，我使用的是 Angular 11 版本和 Angular 材质 11.0.4 版本 <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>

【问题讨论】：

请多解释一下你想做什么？请参阅此 stackoverflow.com/help/how-to-ask 链接以改进您的问题以便更好地理解

标签： javascript html css angular angular-material

【解决方案1】：

我找了很多东西，终于找到了解决办法

import { ThemePalette } from '@angular/material/core';     
color: ThemePalette = "warn";
     <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>

【讨论】：

【解决方案2】：

我猜你说的是单选按钮被选中后的颜色。

通常<mat-radio-group> 将是持有<mat-radio-button> 的外部组

您可以通过 2 种方式更改颜色。

就像您尝试的方式一样，但将 [color] 属性添加到 <mat-radio-group> 。它将从您的主题中获取颜色（预定义或自定义）

全局覆盖styles.scss文件中的CSS（此方法不推荐用于颜色更改，但可以用于其他更改，如圆的半径等，） i) 要覆盖 CSS，只需添加以下代码

   // For outer circle
  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
     border-color: blue;
   }

   // For inner circle
   .mat-radio-checked .mat-radio-inner-circle {
       background-color: blue;
   }

2 个更改中的一个应该可以工作！

【讨论】：

【解决方案3】：

您可以在 CSS 文件中添加以下内容：

::ng-deep .mat-radio-checked .mat-radio-outer-circle {
     border-color: blue;
}

::ng-deep .mat-radio-checked .mat-radio-inner-circle {
     background-color: blue;
}

如果对您有用，请将答案标记为有用。

【讨论】：