如何更改角形材料2中单选按钮的颜色

Question

我正在为下一个问题苦苦挣扎。我正在尝试以适当的方式更改棱角材质2 radio button的颜色，而不覆盖CSS。默认情况下，它使用材质主题的强调色，但我要使用主色。

[其他组件具有checkbox，button等颜色属性...

提前感谢。

Answer 1

如果其他人偶然发现此问题，您现在可以在MatRadioButton组件上使用color属性。这是我已得到纠正的GitHub问题的链接：

• https://github.com/angular/material2/issues/9439

Answer 2

单选按钮组件尚未输入更改颜色。您需要在.scss文件中添加以下行：

/deep/ .mat-radio-outer-circle {
.mat-radio-checked & {
      border-color: #3f51b5;
    }
}

/deep/ .mat-radio-inner-circle {
    background-color: #3f51b5;
}

/deep/ .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(#3f51b5, 0.26);
}

Answer 3

这是对我有用的东西

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle , .mat-radio-outer-circle {
  border-color: blue !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  background-color: blue !important;
}

Answer 4

我的默认主题为金色（白色），我需要将其更改为棕色（白色）。选择时，我需要内部和外部圆圈为棕色，未选择时需要外部圆圈为棕色。我还需要纹波效果来匹配。这是有效的结果：

  & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: brown !important; // Override material
  }

  & .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: brown !important; // Override material
    z-index: 3;
  }

  & .mat-radio-button .mat-radio-outer-circle {
    border-color: brown !important; // Override material
    z-index: 3;
  }

无需更改不透明度。