垫选面板最小宽度

Question

我正在尝试使用多个复选框来自定​​义Mat-select。由于某些原因，面板的最小宽度错误，如下所示：

而且我不知道它的最小宽度在哪里计算。我也尝试添加panelClass并重写此类的最小宽度，例如：

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

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

但是，当打开下拉菜单时，其打开的宽度为原始宽度（如图所示），并在几毫秒后“跳转”到面板类上定义的自定义最小宽度。

我发现很难选择垫子样式。有人知道如何解决这个问题吗？

Answer 1

您可以mat-select通过指定面板类（如您所述）来设置对话框的样式。
请遵循此演示：https : //stackblitz.com/edit/angular-matselect-style?
file = src/ styles.css以查看样式化的mat-select组件。

原因：

• 延迟的原因是对话框的角度，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;}
}

更新了StackBlitz演示

Answer 2

我使用了另一种方法。刚刚将这段代码添加到全局样式中。

.mat-select-panel {
// some your code
  &.ng-animating {
       visibility: hidden;
    }
  }

您可以在DEMO StackBlitz上尝试此解决方案 。
选择关闭时，具有不透明度的黑客没有修复跳跃宽度。