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?