如何减少角材料中 mat-select 的高度，而不是其中的选项？

Question

尝试了我在 Stack Overflow 上看到的解决方案，但它只降低了 mat-select 中选项的高度。

提前致谢。

<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

向您的老板/经理展示this documentation from the angular material website：

<块引用>

组件宿主元素

对于任何 Angular Material 组件，您都可以安全地为组件的宿主元素定义自定义 CSS，这些元素会影响该组件的定位或布局，例如边距、位置、顶部、左侧、变换和 z-index。您应该通过定义自定义 CSS 类并将该类应用到组件的宿主元素来应用此类样式。

避免定义会影响组件大小或内部布局的自定义样式，例如填充、高度、宽度或溢出。您可以指定 display: none 来隐藏组件，但避免指定任何其他显示值。随着版本之间的内部样式发生变化，覆盖这些属性可能会以意想不到的方式破坏组件。

你绝对可以破解它，但是当你使用的框架告诉你不要时，无论如何尝试它都是自找麻烦。

Appearance

您可以使用 appearance、fill 或 standard 在表单字段上指定 outline 属性，以提供更多控制权。通常 fill 会使表单字段显得太高，就像您说的那样，所以也许只指定 appearance='standard' 会获得更好的结果。