Modifying Angular 16 mat-form-field styles

I am looking to change the default styling of Angular Material's MatFormField. I want to reduce the inner padding of the input field in a form field, and reduce the gap between each form field.

I am aware that I probably need to modify some of the css styles Angular puts on the component but I have no idea what needs to be changed exactly.

Example of how I currently use the form fields (I want to reduce the gap between each form field and reduce the padding in the input fields)

<mat-form-field class="col-span-12">
<input
type="text"
matInput
ngModel
(input)="filter(selectedLayer.value)"
name="select"
#selectedLayer="ngModel"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedOption($event)">
<mat-option *ngFor="let option of filteredOptions" [value]="option">
{{ option.label }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="col-span-4">
<input
#fieldInput="ngModel"
type="text"
matInput
disabled
ngModel
name="field">
</mat-form-field>


I was looking to override the styles of the form fields in the css but it didn't really work, bascially nothing changed in the visualization.

I am starting to think if I should create my own components and just extend the material ones?

Continue reading...