如何减小 MatSelect 下拉面板的大小

Question

我正在尝试减小 mat-select 下拉面板的默认大小，但不知道该怎么做

我试过设置宽度，尝试覆盖 angular mat-select 中的面板 class，但尺寸似乎没有缩小

我的模板文件

    <div class="col-md-8">
       <mat-form-field style="float: right">
          <mat-select panelclass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering>
         <mat-option *ngFor="let course of courses" [value]="course.courseId">
          {{course.courseCode}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

我的 Css 文件

 .my-panel {
   background: orange;
   height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 350px !important;
   }

预期结果：

实际结果：

New Issue

Answer 1

您的模板中有错字，应该是 panelClass 而不是 panelclass:

<mat-select panelClass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering>

并且根据文档 here，您组件上的 ViewEncapsulation 必须设置为 None 才能正常工作。在使用 panelClass 的示例的注释中提到：

  // Encapsulation has to be disabled in order for the
  // component style to apply to the select panel.

Here 是一个有效的 stackblitz，将您的风格应用于选项。

Answer 2

您可以通过将下面的 css 添加到主 styles.css 文件来设置 mat-select 的宽度。

.mat-form-field-infix{
    width: 80px !important;
}

根据您的要求更改 80px。

如何减小 MatSelect 下拉面板的大小

How to reduce the size of MatSelect DropDown Panel

angular-material

angular

angular-material-6