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

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>

假设我想使用 Accent 颜色、300 或 A100 的色调，我该怎么做呢？

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

原文由 Konstantinos Kosyfarinis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 style.css/style.scss 中添加这个CSS

堆栈闪电战

样式.css/样式.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);
}

原文由 Krishna Rathore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

所选答案的小升级。为我工作。

 $myMatRadioRippleColor: #0000FF;

::ng-deep .mat-radio-button.mat-accent {
  &.mat-radio-checked .mat-radio-outer-circle {
    border-color: $myMatRadioRippleColor;
  }

  .mat-radio-inner-circle {
    color: $myMatRadioRippleColor;
    background-color: $myMatRadioRippleColor ;
  }

  .mat-radio-ripple .mat-ripple-element {
    background-color: $myMatRadioRippleColor !important;
  }
}

原文由 Pony 发布，翻译遵循 CC BY-SA 4.0 许可协议