Как уменьшить размер MatSelect DropDown Panel

Question

Я пытаюсь уменьшить размер раскрывающейся панели выбора коврика по умолчанию, но не могу понять, как это сделать

Я попытался задать ширину, попытался переопределить класс панели в угловом матовом выборе, но размер, похоже, не уменьшился

Файл моего шаблона

    <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;
   }

Ожидаемый результат:

Фактический результат:

Новый выпуск

Answer 1

Вы можете установить ширину mat-select, добавив css ниже к основному styles.css файлу.

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

Измените 80px согласно вашему требованию.

Answer 2

В вашем шаблоне есть опечатка, она должна быть panelClass, а не panelclass:

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

И согласно документации здесь , ViewEncapsulation на вашем компоненте должен быть установлен на None, чтобы это работало. Это упоминается в комментарии к примеру, где используется panelClass:

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

Здесь является рабочим стековым бликом, к которому применен ваш стиль.