angular-material - 垫选择面板最小宽度

Question

我正在尝试使用多个复选框自定义 mat-select。
由于某种原因，面板错误的最小宽度如下:



我不知道它在哪里计算这个最小宽度。
我还尝试添加 panelClass 并覆盖此类的最小宽度，
例如:

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

但是当打开下拉菜单时，它以原始宽度(如图片所示)打开，几毫秒后“跳转”到面板类上定义的自定义最小宽度。

我发现 mat-select 很难设计。有人知道如何解决这个问题吗？

Answer 1

您可以通过提供面板类(如您所述)来设置 mat-select 对话框的样式。
请按照此演示:https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
查看样式化的 mat-select 组件。

原因:

延迟的原因是对话框的 angular，在 cdk-overlay-pane 容器内创建一个 cdk-overlay-container，所以在 mat-select 的情况下，它提供 180px 的最小宽度，这在轻微延迟时被我们的面板类覆盖。

是的，打开对话框并将其宽度自定义为面板类中提供的指定宽度有轻微延迟。但是在我正在进行的项目中延迟是可以接受的。因此，您可以找到用于设置 mat-select 组件样式的演示，因为我提供了 2 个组件，您可以修改任何 css 属性。

尝试使用使用 ::ng-deep 或 :host >>> 的样式，如果没有找到任何运气，请将样式粘贴到 style.css 中。

更新 1:
尝试 css animations 和 opacity 以平滑打开 mat-select 选项。

.panel-class-applied-on-mat-select {
  animation-name: opacityDelay !important;
  animation-duration: 0.3s !important;
}

@keyframes opacityDelay {
   0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1;}
}

Updated StackBlitz Demo