如何在未选中时改变角度垫子单选按钮的颜色

Question

如何改变垫子单选按钮的颜色，当未选中时。我一直在寻找答案，我想知道不改变整个主题是否可能。

在CSS:: ng-deep .mat-radio-WHAT吗?

我的问题图片

Answer 1

为了改变angular素材中的样式，你应该在angular的styles数组中定义一个全局样式表。. Json配置文件，并自定义。

这是你应该在你的style .css中重写的类，以便改变垫子-单选按钮圆圈的颜色:

不检查单选按钮:

styles: css

.mat-radio-outer-circle {
border-color: red;
}

检查单选按钮:

styles: css

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

请阅读自定义Angular Material组件样式的文章以获得更好的解释。

Answer 2

如果您检查一个垫子-单选按钮的HTML，您会发现所有的类组成的按钮，你需要改变。对于垫子单选按钮，它实际上是用2span创建的，其中一个类为mat-radio-outer-circle，另一个类为mat-radio-inner-circle。

工作示例:https://angular-material-components-demo-ag7pog.stackblitz.io