角材垫选择下拉宽度

Question

当前下拉框的宽度大于行的宽度：

有没有办法摆脱多余的宽度？

这是我当前的代码：

的HTML：

<mat-form-field>
    <mat-select disableOptionCentering placeholder="Choose an option">
      <mat-option [value]="option" *ngFor="let option of my_list">
          {{ option }}
      </mat-option>
    </mat-select>
</mat-form-field>

我的清单：

export const my_list: string[] = [ "a", "b", "c", "d"];

style.css：

.mat-select-panel{
    margin-left: 15px;
    margin-top: 28px;
}

Answer 1

对于那些仍然试图在不使实际选择更小或更宽的情况下弄清楚的人。

mat-select-panel 使用 100% 的 mat-select 宽度加上 32px

min-width: calc(100% + 32px)

您可以使用 ng-deep 覆盖此样式：

::ng-deep .mat-select-panel {
    min-width: 100% !important;
}

Answer 2

尝试这个并改变宽度：

   <mat-select style="width:10px">