CODEWITHSUNDEEP
htmlcssangular
kenzolek
kenzolek

Reputation: 344

How to change font-weight of label

I would like to change style of angular material design component. In .scss file I override cascade style but only 'font-weight' property is still the same equals 700 but I want to change to 400. This is html component and scss style below:

<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);
}

Upvotes: 2

Views: 7052

Answers (1)

GameTag
GameTag

Reputation: 379

In your component.scss create your class

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

In your component.html

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

Normally it's gonna work, because when Angular render the component it will be associated with a unique ID, so at the end your CSS should be looks like :

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

Upvotes: 0

Related Questions