如何调整Mat-Select弹窗宽度且不影响自身元素（Angular 15）

要只调宽Mat-Select的下拉弹窗而不改变其自身宽度及表格布局，核心是利用Angular Material提供的panelClass属性为下拉面板单独添加自定义样式，具体步骤如下：

1. 为Mat-Select添加panelClass属性 #

修改HTML中的mat-select标签，新增panelClass属性指定自定义类名：

<mat-select class="filterSelect" 
            [(value)]="selectedValues[col.field]" 
            multiple 
            placeholder="Filter"
            panelClass="wide-select-panel"  <!-- 新增该属性 -->
            (selectionChange)="applyColumnFilter(col.field)">
  <mat-option *ngFor="let uniqueValue of getUniqueValues(col.field)" [value]="uniqueValue">
    {{uniqueValue}}
    <span *ngIf="getCountAndCheck(col.field, uniqueValue) != 0">
      ({{getCountAndCheck(col.field, uniqueValue)}})
    </span>
  </mat-option>
</mat-select>

2. 添加自定义CSS样式 #

通过自定义类修改下拉面板的宽度，有两种实现方式：

方式一：全局样式（推荐） #

在项目根目录的styles.css（或styles.scss）中添加样式：

.wide-select-panel {
  min-width: 250px; /* 设置你需要的最小宽度 */
  /* 可选：让宽度自适应内容 */
  /* width: max-content; */
}

方式二：组件内样式（需穿透视图封装） #

如果要在组件的CSS文件中实现，需使用::ng-deep穿透Angular的视图封装：

::ng-deep .wide-select-panel {
  min-width: 250px;
  width: max-content;
}

3. 按需为不同列设置不同宽度（可选） #

如果需要针对不同列的下拉面板设置不同宽度，可动态绑定panelClass：

<mat-select class="filterSelect" 
            [(value)]="selectedValues[col.field]" 
            multiple 
            placeholder="Filter"
            [panelClass]="'wide-select-panel-' + col.field"  <!-- 动态生成类名 -->
            (selectionChange)="applyColumnFilter(col.field)">
  <!-- ... 其他代码 ... -->
</mat-select>

然后在样式文件中针对不同列设置宽度：

.wide-select-panel-name {
  min-width: 300px;
}
.wide-select-panel-status {
  min-width: 200px;
}

原理说明 #

panelClass是Angular Material专门为Mat-Select下拉面板提供的自定义类属性，通过它可以精准控制下拉弹窗的样式，不会影响Mat-Select自身的宽度及表格列的布局，完美解决需求。

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