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

【问题标题】：Angular 6 Material - Hues and How to change the color of mat radio buttonAngular 6 Material - 色调和如何更改垫单选按钮的颜色
【发布时间】：2019-03-04 06:30:56
【问题描述】：

如何更改使用 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，但是不起作用

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

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

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);
}

【讨论】：

谢谢！像魅力一样工作！
只有“破解”解决方案吗？是的，应该完成这项工作的 Material 组件上的自定义样式是黑客攻击。如果只有css解决方案，我建议使用Material的颜色变量，而不是颜色代码重复。
点击效果可以改变颜色吗？而不是粉红色？

【解决方案2】：

以上都不适合我。但这一个有效，即将 color="primary" 放在 mat -radio 按钮上。即

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

见下例

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

【讨论】：

这是最好的。

【解决方案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*/
}

【讨论】：

确保在 ::ng-deep 之前添加 :host。来自文档：“...，请确保在 ::ng-deep 之前包含 :host 选择器。如果在没有 :host 伪类选择器的情况下使用 ::ng-deep 组合器，则该样式可能会渗透到其他组件中。 "
但是，在全局范围规则的帮助下，通过 ::ng-deep 收集对材料组件样式的完全控制，这无疑是一个很好的方法。又快又脏，但很管用！

【解决方案4】：

您可以使用以下方法设置自定义颜色：

将此代码放入您的模块声明中：

providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'accent' },
}]

【讨论】：

【解决方案5】：

对我有用的解决方案是这样的，将其添加到您的：

style.css/style.scss

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:  rgb(22, 92, 125) !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color:  rgb(22, 92, 125) !important;
    z-index: 3;
}

.mat-radio-button .mat-radio-outer-circle {
    border-color:  rgb(22, 92, 125) !important; // Override material
    z-index: 3;
}

【讨论】：