如何更改标签

Question

我想改变角度材料设计组件的风格。在.scss文件中，我覆盖了级联样式，但只有＆＃39; font-weight＆＃39;属性仍然相同等于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渲染组件时它会与唯一的ID相关联，所以最后你的CSS应该是这样的：

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