如何更改标签

时间:2018-05-03 11:04:02

标签: html css angular

我想改变角度材料设计组件的风格。在.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);
}

1 个答案:

答案 0 :(得分: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;
}