Angular материал: изменение цвета текста на ярлыке и флажок на радио

Question

Я пытаюсь изменить цвет метки-флажка и цвета метки-радио после их проверки, но я не уверен, как это сделать с angular входами материала. Любая помощь будет по достоинству оценена.

Answer 1

Просто определите класс 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 2

Вы можете использовать чистый CSS раствор. Angular Материал предоставляет классы для этого:

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

::ng-deep требуется только в том случае, если вы используете инкапсулированный css. Подробнее

Answer 3

Для этого вам нужно переопределить стиль angular материала. Вы можете переопределить стили, используя ::ng-deep. Для получения дополнительной информации:

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

Надеюсь, это даст некоторое представление о том, как сделать то же самое.