如何仅自定义Angular Material中mat-select的ListBox宽度？

默认情况下，mat-select的下拉面板（ListBox）会继承mat-select的宽度，要单独设置它的宽度，可以通过以下两种方式实现：

方法一：使用panelClass属性（推荐） #

这种方式更模块化，不会影响其他mat-select组件：

1. 在你的mat-select标签上添加panelClass属性，指定自定义类名：

<mat-select
  [formControlName]="_field.name"
  [placeholder]="_field?.placeholder || _field?.label || ''"
  panelClass="custom-select-dropdown"
>

2. 在全局样式文件（如styles.scss）中添加对应样式，自定义下拉面板的宽度：

.custom-select-dropdown {
  min-width: 350px; /* 设置最小宽度，可根据需求调整 */
  /* 或者使用固定宽度：width: 350px; */
  /* 若要让宽度自适应内容，可设置：width: auto; */
}

注意：必须在全局样式文件中定义，因为下拉面板是挂载在全局overlay容器中的，组件内的样式隔离无法穿透到这里。

方法二：使用组件内穿透样式（不推荐，因::ng-deep已废弃） #

如果需要在组件样式文件中定义，可以使用::ng-deep（但该语法已被标记为废弃，未来可能移除）：

:host ::ng-deep .mat-select-panel {
  min-width: 350px;
}

添加:host前缀可以避免样式污染全局其他mat-select组件。

修改后的完整mat-select代码示例：

<mat-form-field
  appearance="outline"
  [formGroup]="formGroup"
  [ngClass]="_field?.formFieldClass || ''"
>
  <mat-label *ngIf="_field?.label"> {{ _field.label }} </mat-label>
  <mat-select
    [formControlName]="_field.name"
    [placeholder]="_field?.placeholder || _field?.label || ''"
    panelClass="custom-select-dropdown"
  >
    <mat-optgroup *ngIf="_field?.options?.length === 0">
      <div>No results found!</div>
    </mat-optgroup>
    <mat-option [hidden]="true"></mat-option>
    <mat-option
      *ngFor="let item of _field?.options"
      [value]="item?.key || item.value"
    >
      {{ item.value }}
    </mat-option>
  </mat-select>
  <ng-container
    *ngFor="let validation of _field?.validations"
    ngProjectAs="mat-error"
  >
    <mat-error *ngIf="formGroup.get(_field.name)?.hasError(validation.name)">{{
      validation.message
    }}</mat-error>
  </ng-container>
</mat-form-field>

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