如何增大mat-select选项面板尺寸而不改变mat-form-field大小

你当前的问题是直接给mat-select元素设置宽度，会修改选择器触发区域的尺寸，自然会影响外层mat-form-field的布局。使用Angular Material提供的panelClass属性专门控制下拉面板的样式即可，不会对触发区域和外层表单字段产生任何影响。

步骤1：修改HTML代码 #

不要直接给mat-select的根class加宽度控制，把自定义类绑定到panelClass属性上，该属性专门作用于下拉弹出面板：

<mat-form-field>
    <mat-label>Account Name</mat-label>
    <mat-select
        id="account_list"
        ngDefaultControl
        formControlName="account"
        panelClass="menu-size"
    >
        <mat-option
            *ngFor="let acc of accounts; let i = index"
            [value]="acc.name"
            id="account_option_{{ i }}"
        >
            {{ acc.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

步骤2：调整CSS样式 #

由于下拉面板是全局Overlay层渲染，不属于当前组件的DOM子树，根据你写样式的位置选择对应写法即可：

写在当前组件样式文件的写法（需穿透样式隔离） #

/* 用:host包裹避免污染全局其他组件样式 */
:host ::ng-deep .menu-size {
    width: 350px !important;
    /* 可按需扩展其他面板样式，比如最大高度 */
    max-height: 450px;
}

写在全局样式文件（比如styles.css）的写法 #

.menu-size {
    width: 350px !important;
    max-height: 450px;
}

补充说明 #

• 若默认样式优先级足够，可去掉!important，样式不生效时再加即可
• 该方案完全不影响mat-form-field和mat-select触发区域的原有尺寸，仅修改下拉选项面板的大小

内容的提问来源于stack exchange，提问作者user123456789