在Angular Material中对样式进行选择

Question

如何为mat-select的面板组件设置样式。从文档中我得到我需要提供panelClass，所以我将其设置为：

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

我在开发人员工具中检查了此类是否已附加到DOM中的面板并已附加。因此，我将自定义scss类附加到此元素。现在，当我提供CSS时，它根本不起作用。例如，我的s​​css如下所示：

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

面板的宽度始终等于width选择元素的宽度。有时在选项中，您的字符串太长，我想使其更宽一些。有什么办法可以做到这一点。我组件中的样式甚至background- color不起作用。有人知道为什么这如此奇怪吗？

我正在使用：角4.4.5 @角/材质：2.0.0-beta.12

Answer 1

Angular Material mat-select-content用作选择列表内容的类名。对于其样式，我将建议四个选项。

1.使用 :: ng-deep：

使用/ deep /刺穿阴影的后代组合器将样式向下强制通过子组件树进入所有子组件视图。/ deep
/组合器适用于嵌套组件的任何深度，并且适用于该组件的视图子级和内容子级。/ deep /，>>>和:: ng-
deep仅与模拟视图封装一起使用。默认是最常用的视图封装。有关更多信息，请参见“控制视图封装”部分。不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/
deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

CSS：

::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}

2.使用ViewEncapsulation

…组件CSS样式封装在组件的视图中，不会影响应用程序的其余部分。要控制每个组件的封装方式，可以在组件元数据中设置视图封装模式。从以下模式中选择：....无表示Angular不进行视图封装。Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这本质上与将组件的样式粘贴到HTML中相同。

没有值是打破封装并从组件设置材料样式所需要的。因此可以在组件的选择器上进行设置：

打字稿：

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })

的CSS

.mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;
}

3.在style.css中设置类样式

这次，您也必须“强制”样式!important。

style.css

 .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 }

4.使用内联样式

<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>