Angular 6材质-色调和如何更改垫子单选按钮的颜色

Question

如何更改使用CSS的颜色？

在另一篇文章中看到，如果我使用以下代码，它将对其进行更改，但是到目前为止我还没有运气。

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37);
  }

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: rgb(66, 134, 244);
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: rgb(66, 134, 244);
}

另外，如何使用其余的色调？

<mat-radio-button color="accent">Hello, World</mat-radio-button>

假设我要使用口音颜色（300或A100的色相），该怎么做？

我试过使用accent-100，accent hue-100但是不起作用

Answer 1

以上都不适合我。但这是有效的，即将 color="primary" 放在 mat 单选按钮上。IE

<mat-radio-button color="primary" value=1>Active</<mat-radio-button>. 

请参阅下面的示例

https://stackblitz.com/edit/angular-material2-issue-ethbcx

Answer 2

::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*/
}

Answer 3

将此CSS添加到您的 style.css/style.scss

Stackblitz

style.css / style.scss

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
  border-color:rgb(66, 134, 244); 
}

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  color:rgb(66, 134, 244);
  background-color:rgb(66, 134, 244) ;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37,.26)
}