Как изменить вес шрифта надписи

Question

Я бы хотел изменить стиль компонента дизайна углового материала. В файле .scss я переопределяю стиль каскада, но только свойство 'font-weight' по-прежнему равно 700, но я хочу изменить его на 400. Ниже приведен HTML-компонент и стиль scss:

<div class="form-group">
    <mat-form-field floatPlaceholder="always" class="example-radio-button">
        <input matInput placeholder="Contact Preference" required>
        <mat-radio-group name="conPref" [(ngModel)]="contact" required>
            <mat-radio-button *ngFor="let contact of contacts" [value]="contact">
                {{contact}}
            </mat-radio-button>
        </mat-radio-group>
    </mat-form-field>
</div>



mat-form-field {
    width: 500px;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.54);
}

Answer 1

В вашем component.scss создайте свой класс

.mat-form-field-custom {
  font-weight: 400;
}

В вашем component.html

<mat-form-field class="mat-form-field-custom">

Обычно это работает, потому что когда Angular рендерит компонент, он будет связан с уникальным идентификатором, поэтому в конце ваш CSS должен выглядеть так:

#ComponentID .mat-form-field-custom {
   font-weight: 400;
}