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

Question

我正在努力解决下一个问题。我正在尝试以正确的方式更改角材料 2 radio button 的颜色，而不覆盖 css。默认情况下，它使用材质主题的强调色，但我想使用主色。

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

提前致谢。

Answer 1

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

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

Answer 2

ng-deep 已被弃用。将此代码复制到您的 styles.scss 文件中。它会起作用的。

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
opacity: 0 !important; /*click effect color change*/
background-color: #422873 !important;  }

.mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: #422873 !important; /*inner circle color change*/  }

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #422873 !important; /*outer ring color change*/  }

Answer 3

单选按钮组件没有输入更改颜色。 您需要在 .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 4

这对我有用

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