如何让Angular Material mat-select下拉列表宽度自适应最宽选项？

核心思路 #

Angular Material 6.x版本的mat-select下拉面板默认会继承触发选择器的固定宽度，长文本选项会被默认裁剪，我们通过自定义面板类覆盖默认样式即可实现自适应宽度。

• 第一步：给mat-select组件绑定自定义面板类，避免修改全局mat-select样式，仅作用于需要自适应的组件

<mat-select 
  placeholder="请选择" 
  [panelClass]="'auto-width-select-panel'"
>
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

• 第二步：添加对应样式，分两种场景使用：

  1. 样式写在全局styles.css中（更稳定，不受组件样式隔离影响）

  /* 覆盖面板默认固定宽度 */
  .auto-width-select-panel {
    width: auto !important;
    min-width: 100% !important; /* 最小宽度和触发控件保持一致，不会太窄 */
    max-width: 90vw; /* 可选配置，限制最大宽度避免超出视口 */
  }
  /* 禁止选项文本折行，才能正确计算最宽内容的宽度 */
  .auto-width-select-panel .mat-option {
    white-space: nowrap !important;
  }
  

  2. 样式写在当前组件的css文件中，需要加::ng-deep穿透样式隔离

  :host ::ng-deep .auto-width-select-panel {
    width: auto !important;
    min-width: 100% !important;
    max-width: 90vw;
  }
  :host ::ng-deep .auto-width-select-panel .mat-option {
    white-space: nowrap !important;
  }
  

• 可选补充配置
  如果上述样式应用后仍有偏移问题，可给mat-select添加[disableOptionCentering]="true"属性，关闭默认的选项居中偏移计算，避免宽度计算异常。

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