Change working in developer console is not working in local in angular mat-form-field

Question

I am new to front end development wrt to HTML and CSS styling, trying to work on an angular project

I have a HTML table in which in the rows I'm using the angular mat select dropdowns. I had to make changes wrt to height of the rows in each row and I tried adjusting the heights using the chrome developer tools. When I make some change in the developer tool console, the UI is as I wanted.So I copy pasted the same line of code in my CSS file but the change is not working. The code I was trying to edit in developer console is

.mat-form-field-infix {
    padding: .5em 0;
    border-top: .84375em solid transparent;
}

I am trying to change the border-top in this, which is working fine if I make a change in developer console and doesn't work even if I same code.

Answer 1

You can try using ng-deep.

::ng-deep {
.mat-form-field-infix {
    padding: .5em 0;
    border-top: .84375em solid transparent;
}
}