垫选面板最小宽度

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

Updated StackBlitz Demo

Answer 2

您需要在组件装饰器处将viewEncapsulation更改为none，然后添加以下CSS来消除过渡效果。请查看angular docs https://angular.io/guide/component-styles#view-encapsulation中的viewencapsulation。

@Component({
selector: 'app-selector',
templateUrl: './template.html',
styleUrls: ['./template.css'],
encapsulation: ViewEncapsulation.None
})
//CSS
.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane .mat-select-panel.ng-animating {
display: none;
}

Answer 3

我使用了另一种方法。 只需将这段代码添加到全局样式即可。

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

Answer 4

尝试这种方式：在代码中为您的垫选择定义面板类，然后在全局/应用样式文件中添加：

.panel-class-name .mat-select-panel {
 // add your styling here
}

为我添加一些特定于材料组件的特定于组件的样式对我来说很有用。