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 时，它就不起作用了。例如，我的 scss 如下所示：

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

面板的宽度总是等于选择元素的 width 。有时在选项中你有太长的字符串，我想让它更宽一点。有什么办法可以做到这一点。我的组件风格甚至无法正常工作 background-color 无法正常工作。有人知道为什么这行为如此奇怪吗？

我正在使用：Angular 4.4.5 @angular/material: 2.0.0-beta.12

原文由 Marcin Kapusta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 Angular9+，根据 this ，您可以使用：

 .mat-select-panel {
    background: red;
    ....
}

演示

---

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

1. 使用 ::ng-deep ：

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

CSS：

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

演示

---

2.使用 ViewEncapsulation

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

None 值是您打破封装并从组件中设置材质样式所需的值。所以可以在组件的选择器上设置：

打字稿：

   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 来“强制”样式。

样式.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;" ...>

演示

原文由 Vega 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将您的类名放在 mat-form-field 元素上。这适用于所有输入。

原文由 Lee Grindon 发布，翻译遵循 CC BY-SA 4.0 许可协议