如何使用CSS增大Angular Material下拉选择框的宽度？

方案1：直接设置mat-form-field宽度 #

给下拉框所在的mat-form-field添加样式，强制指定宽度：

<mat-form-field style="width: 300px;">
  <mat-select placeholder="Amazon" formControlName="dataCharged">
    <mat-option
      *ngFor="let info of dataCharged.values"
      [value]="info"
    >{{ dataCharged.descriptions[info] }}</mat-option>
  </mat-select>
</mat-form-field>

如果需要统一维护，推荐用CSS类：

/* 在组件样式或全局样式中定义 */
.wide-form-field {
  width: 300px; /* 根据需求调整数值 */
}

<mat-form-field class="wide-form-field">
  <!-- mat-select内容 -->
</mat-form-field>

方案2：自定义下拉面板宽度（适配超长选项） #

如果选项文本过长，需要下拉面板比输入框更宽，可以用mat-select的panelClass属性：

<mat-select 
  placeholder="Amazon" 
  formControlName="dataCharged"
  panelClass="wide-select-panel"
>
  <!-- 选项内容 -->
</mat-select>

然后在全局样式文件（如styles.css）中添加：

.wide-select-panel {
  min-width: 350px; /* 确保能容纳最长选项文本 */
}

注：必须在全局样式中定义，组件内样式会因视图封装无法生效。

方案3：解除父容器宽度限制 #

你的代码中，下拉框所在父div有class="w-1/4"（Tailwind类，限制宽度为父元素的25%），这会压缩下拉框空间。可以修改这个类：

<div
  *ngIf="form2.value.extendedProperties.allowData"
  fxLayout="row"
  fxLayoutAlign="start center"
  fxLayoutGap="16px"
  class="w-1/2" <!-- 将w-1/4改为w-1/2，或直接删除该类让容器自适应 -->
>

或者给mat-form-field添加fxFlex，让它占满可用空间：

<mat-form-field fxFlex>
  <mat-select placeholder="Amazon" formControlName="dataCharged">
    <!-- 选项内容 -->
  </mat-select>
</mat-form-field>

额外修复：代码中的语法错误 #

你代码里的{{.name }}缺少变量名，应该改为{{ amazon.name }}：

<mat-option *ngFor="let amazon of amazons" [value]="amazon.id">
  {{ amazon.name }}
</mat-option>

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