Angular Material - Changing the density doesn't affect the html element

I want to make my matInput smaller than the default size. The html looks like this:

<mat-form-field class="input-parent" subscriptSizing="dynamic" appearance="outline" style=" margin-right: 10px; font-size: 12px;">
<input matInput type="text" [(ngModel)]="input" (keydown)="checkForSubmit($event)">
</mat-form-field>


In the scss, I followed this answer, and added the following scss:

.input-parent{
@include mat.input-density(-2);
}


But, it doesn't affect the size of the input at all. I also tried stuff like

-mat.all-component-densities instead of mat.input-density

moving it out of the class to the main scss file

putting it inside body instead of .input-parent

setting the parent class to the parent of the mat-form-field instead of the direct parent of the mat-input

but nothing works. I also want to add that changing the density of a button worked, but not the density of an input.

Does anyone have a solution? Thanks

Continue reading...