如何在 angular material 2 中更改单选按钮的颜色

Question

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

其他组件的颜色为属性，例如 checkbox, button，等等...

提前致谢。

Answer 1

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

如果其他人遇到这个问题，您现在可以在 MatRadioButton 组件上使用颜色属性。这是 link 到 GitHub 问题的更正：

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

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

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

如何在 angular material 2 中更改单选按钮的颜色

How to change color of radio button in angular material 2

angular

angular-material2