Angular Material 中的样式垫选择答案

【问题标题】：Styling mat-select in Angular MaterialAngular Material 中的样式垫选择
【发布时间】：2018-03-27 18:07:33
【问题描述】：

如何设置 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 也不起作用。有人知道为什么这会表现得如此奇怪吗？

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

【问题讨论】：

这是你要找的（我将宽度设置为其他值）？ plnkr.co/edit/gXaf7j6EfWkT3nRMOXOi?p=preview
嘿！谢谢你的榜样。它确实有效，但我试图用::ng-deep 避免这种解决方案，因为：angular.io/guide/component-styles#deprecated-deep--and-ng-deep
然后你可以移除 ::ng-deep 并设置封装：ViewEncapsulation.None :)
你知道我对角度和材料设计非常陌生。我来自iOS开发。什么是封装？你能指点我一些文档吗？
谢谢！为什么当我将样式放入主 style.scss 文件（此样式未附加到任何特定组件）时这不起作用？我认为我需要小心禁用封装，因为它会影响其他组件或者我错了？

标签： css angular typescript angular-material

【解决方案1】：

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

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

Demo

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

1.使用::ng-deep：

使用 /deep/ 穿透阴影的后代组合器来强制样式通过子组件树向下进入所有子组件意见。 /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;   
}

DEMO

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

DEMO

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

这一次您也必须使用 !important 来“强制”样式。

style.css

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

DEMO

4.使用内联样式

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

DEMO

【讨论】：

感谢您的回复。它正在工作，但我想知道为什么我们在 mat-select 元素中有这个 panelClass 参数。是没有按预期工作还是这个参数的用途不同？
很好的解释，其中还解释了视图封装。一个用于文档。哦，顺便问一下，SO 文档项目又叫什么？在 SO 文档中我可以再次找到它的链接吗？
@Vega stackoverflow.com/documentation 啊，我没去过，显然：/
::ng-deep 已弃用：angular.io/guide/component-styles#deprecated-deep--and-ng-deep 在弄乱 ViewEncapsulation 和使用 styles.css 之前尝试使用 Angular 组件中的输入。我尽量避免 ::ng-deep 因为它已被弃用，它可以在任何时候被丢弃。虽然 Angular 还没有想出替代方案...
@RonanC 不完全，还没有。而且由于可能会贬值，我已经提出了更多选择:)

【解决方案2】：

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

【讨论】：

这适用于输入样式，但是如果您将样式范围限定为mat-form-field 上的类，那么您无法设置mat-options 的覆盖样式。只是一个旁注。

【解决方案3】：

工作解决方案是使用 in-build: panelClass 属性并在全局 style.css 中设置样式（使用 !important）：

https://material.angular.io/components/select/api

/* style.css */
.matRole .mat-option-text {
  height: 4em !important;
}

&lt;mat-select panelClass="matRole"&gt;...

【讨论】：

【解决方案4】：

在 css 中复制此代码以使宽度为 100%

mat-form-field {
  width: 100%;
}

【讨论】：

【解决方案5】：

角材料 11.2.6

      <mat-select class="text-sm">
        <mat-option> Text </mat-option>
      </mat-select>

其中 text-sm（顺风）

.text-sm {font-size: 0.75rem}

【讨论】：

【解决方案6】：

这里是样式垫选择的成熟解决方案。

HTML 如下：

<mat-form-field class="booking-facility">
  <mat-select disableOptionCentering placeholder="facility" panelClass="booking-facility-select" [ngModel]="facilityId"
                      (ngModelChange)="updateFacility($event)">
    <mat-option *ngFor="let fac of facilities | keyvalue" [value]="fac.value.id">
      <span>{{ fac.value.name | lowercase }}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

SCSS 如下（使用全局样式表，即 styles.scss）：

.booking-facility-styles {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 1px;
  font-size: 22px;
  color: #55595C;
}

.booking-facility {
  // label
  @extend .booking-facility-styles;

  // label
  .mat-form-field-label {
    @extend .booking-facility-styles;
    color: #BBB !important;
  }

  .mat-select-value-text {
    // select
    @extend .booking-facility-styles;
  }
}

.booking-facility-select .mat-option {
  // options
  @extend .booking-facility-styles;
  font-size: 16px !important;
}

【讨论】：

【解决方案7】：

  .mat-form-field .mat-input-element, .mat-form-field .mat-select,
  .mat-form-field.mat-form-field-appearance-legacy .mat-input-element,
  .mat-form-field.mat-form-field-appearance-legacy .mat-select {
    background-color: #0A0A0A !important;

    .mat-select-value {
      color: #fefefe !important;
      font-size: 14px !important;
      font-weight: $font-w-light;
    }
  }

【讨论】：