How do I decrease the height of mat-select in angular material, not the options inside it?

Question

Have tried a solution I saw on Stack Overflow but it only decreased the height of the options inside the mat-select.

Thank you in advance.

<mat-form-field *ngIf="!isLoading" appearance="fill">
    <mat-label>Sort by Type</mat-label>
    <mat-select
        panelClass="sel"
        name="selected"
        [(ngModel)]="selected"
        (selectionChange)="onChangeSelect()"
    >
        <mat-option value="">All</mat-option>
        <mat-option value="Db">Debit</mat-option>
        <mat-option value="Cr">Credit</mat-option>
    </mat-select>
</mat-form-field>

Answer 1

Show your boss/manager this documentation from the angular material website:

Component host elements

For any Angular Material component, you can safely define custom CSS for a component's host element that affect the positioning or layout of that component, such as margin, position, top, left, transform, and z-index. You should apply such styles by defining a custom CSS class and applying that class to the component's host element.

Avoid defining custom styles that would affect the size or internal layout of the component, such as padding, height, width, or overflow. You can specify display: none to hide a component, but avoid specifying any other display value. Overriding these properties can break components in unexpected ways as the internal styles change between releases.

You can absolutely hack it, but when the framework you're using is telling you not to, then trying it anyway is begging for trouble.

Appearance

You can specify the appearance attribute on the form field with fill, standard, or outline to give you slightly more control. Often fill makes the form field appear too tall, like you are saying, so maybe just specifying appearance='standard' will achieve a nicer result.