Изменить ширину (короче) на элементе mat-option

Question

Я пытаюсь изменить (укоротить) параметры mat в пределах mat-select.К сожалению, я всегда получаю дополнительную площадь заполнения.Разве для этого не разработан путь?У кого-нибудь есть опыт?Вот мой StackBlitz, он очень близок:

По сути, мне нужно, чтобы все 3 выпадающих элемента имели ширину 100 пикселей на этом StackBlitz ЗДЕСЬ .

РЕДАКТИРОВАТЬ

Мне все еще нужна помощь

@ Ответ Дэвида очень близок, есть только некоторые проблемы с оформлением контейнера cdk-overlay без :host

Я не могу использовать :host так как это повлияет на другие выпадающие списки на экране, когда это не предусмотрено.

Answer 1

можно контролировать путем добавления высоты и заполнения css в класс .mat-options.

.mat-option{
   height: 30px !important;
   padding: 0 5px !important;
}

Answer 2

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

::ng-deep .cdk-overlay-pane
{
  min-width: auto !important;
}

::ng-deep .cdk-overlay-container
{
  display:inline-block;
}

::ng-deep .ng-animating .mat-option {
  margin-right: -32px;
}

Демонстрация Stackblitz

Редактировать

На самом деле это проблема: оверлейный контейнер является общим для компонентов материала.Поэтому, если вы создадите стиль, как указано выше, правила CSS будут применяться ко всем выбранным компонентам.Кроме того, оверлейный контейнер находится вне самого компонента, поэтому вы не можете ограничить правило с помощью селектора верхнего уровня, например :host.

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

Это что-то вроде хака, и они могут быть лучшими решениями (возможно, если вы создадите свое собственное наложение)

Это все равно не работает идеально, когда вы открываете / закрываете выделенный элемент

Демонстрация Stackblitz