使用纯 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

您可以使用::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 演示

Answer 2

由于您的 angular 版本是 2.4.3，我假设您使用的是 beta.2 或更旧版本的材料（beta.3 及更高版本需要 angular 4.x）。 旧版本中的类与当前的类具有不同的类名。 因此，您可以尝试使用以下 css：

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

使用 Angular 2.4.1 和 Material beta.1 的Plunker 演示

材料 beta.2：

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

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

使用 Angular 2.4.1 和 Material beta.2 的 Plunker 演示

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`