将 Material 2 中的单选按钮颜色更改为普通 CSS

Question

我在更改 Angular Material 2 组件的单选按钮颜色时遇到问题。我搜索了其他答案，但无法正常工作。

这是 Material 2 单选按钮示例中的一个 plunkr：

https://plnkr.co/edit/JNDRKkF2oAxU5gPsR4lO?p=preview

我知道它适用于这条线

<md-radio-button color="primary" class="example-radio-button"
   *ngFor="let season of seasons" [value]="season">
    {{season}}
</md-radio-button>

但是我不能使用 "color" 属性因为我们使用的是 Material 2 的旧版本，目前我们无法升级它。

所以有人知道如何在上面的示例中使用普通的 CSS 来做到这一点，我将不胜感激。我试了一个多小时了..

Answer 1

您可以使用 ::ng-deep 来完成。将以下类添加到您的组件样式中：

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

/deep/  .mat-radio-button.mat-accent .mat-radio-inner-circle{
    background-color: green;
}

看到这个PLUNKER DEMO

Answer 2

由于您的 angular 版本是 2.4.3，我假设您使用的是 beta.2 或更旧版本的 material（beta.3 及更高版本需要 angular 4.x).旧版本中的 classes 与当前版本具有不同的 class 名称。所以，您可以尝试以下 css:

Material beta.1:

/deep/ .md-radio-inner-circle {
    background-color: skyblue;  /* Pick your color */
}

/deep/ .md-radio-checked .md-radio-outer-circle {
    border-color: skyblue;     /* Pick your color */
}

Plunker demo 使用 Angular 2.4.1 和 Material beta.1

Material beta.2:

/deep/ .mat-radio-inner-circle {
    background-color: yellow;
}

/deep/ .mat-radio-checked .mat-radio-outer-circle {
    border-color: lime;
}

Plunker demo 使用 Angular 2.4.1 和 Material beta.2

Answer 3

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  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*/
}`enter code here`

将 Material 2 中的单选按钮颜色更改为普通 CSS

Change radio button color in Material 2 with plain CSS

angular-material

angular-material2

angular