如何设置Angular Material的mat-select下拉菜单宽度与表单字段不同

要让mat-select的输入框保持75px窄宽度，同时下拉菜单能完整显示长文本选项，按以下步骤操作：

1. 设置输入框宽度
   直接给mat-form-field设置固定宽度，示例如下：

<mat-form-field style="width: 75px;">
  <mat-label>选择项</mat-label>
  <mat-select panelClass="wide-dropdown-panel">
    <mat-option value="opt1">这是一条超长的选项文本，需要下拉菜单完整展示</mat-option>
    <mat-option value="opt2">另一条测试用的长选项内容</mat-option>
    <mat-option value="opt3">短选项</mat-option>
  </mat-select>
</mat-form-field>

2. 自定义下拉面板宽度
   通过mat-select的panelClass属性给下拉面板绑定自定义类，再通过样式调整面板宽度：

• 若使用组件内样式，需添加::ng-deep穿透组件封装：

::ng-deep .wide-dropdown-panel {
  min-width: 280px; /* 可根据需求调整固定最小宽度 */
  width: max-content; /* 可选：自动适配最长选项的内容宽度 */
}

• 更推荐在全局样式文件（如styles.scss）中直接编写样式，无需穿透：

.wide-dropdown-panel {
  min-width: 280px;
  width: max-content;
}

这样就能实现输入框窄、下拉菜单宽的效果，长文本选项可完整显示在下拉面板中。

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