angular - 使用纯 CSS 更改 Material 2 中的单选按钮颜色

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>

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

如果有人知道如何在上面的示例中使用纯 CSS，我将不胜感激。我试了一个多小时了..

Answer 1

由于您的 Angular 版本是 2.4.3，我假设您使用的是 beta.2 或旧版本的 Material (beta.3 及更高版本需要 angular 4.x)。旧版本中的类与当前版本具有不同的类名。因此，您可以尝试使用以下 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