Question

在尝试检查mat-checkbox和mat-radio标签的颜色后，我尝试更改它们的颜色，但是我不确定如何使用有角材料输入。任何帮助将不胜感激。

Answer 1

为此，您需要覆盖角形材料的样式。您可以使用::ng-deep覆盖样式。有关更多信息：

https://ngrefs.com/latest/styling/ng-deep-selector

希望这会给您一些思路，以供参考。

Answer 2

只需为您的颜色定义一个类selected。

.selected {
    color: green;
}

然后在您的html中，有条件地将该类添加到mat-checkbox和mat-radio-button中。

<mat-checkbox [class.selected]="checked" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox [class.selected]="indeterminate" class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>

<label class="example-margin">Align:</label>
<mat-radio-group [(ngModel)]="labelPosition">
    <mat-radio-button [class.selected]="labelPosition === 'after'" class="example-margin" value="after">After</mat-radio-button>
    <mat-radio-button [class.selected]="labelPosition === 'before'" class="example-margin" value="before">Before</mat-radio-button>
</mat-radio-group>

Answer 3

您可以使用纯CSS解决方案。 Angular Material为此提供了类：

/* radio */
::ng-deep .mat-radio-checked .mat-radio-label-content {
    color: green;
}
/* checkbox */
::ng-deep .mat-checkbox-checked .mat-checkbox-label {
    color: green;
}

仅当使用封装的CSS时才需要

::ng-deep。 More info

角材料：更改在mat-复选框和mat-radio选中的标签文本颜色

3 个答案: