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>

但我不能使用＆＃34;颜色＆＃34;属性，因为我们使用的是旧版本的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

由于您的角度版本是2.4.3，我的假设是您使用的是beta.2或更早版本的材料（beta.3及更高版本需要角度为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 */
}

Plunker demo使用Angular 2.4.1和Material beta.1

材料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`

使用纯CSS更改材质2中的单选按钮颜色

3 个答案: