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

面板的宽度始终等于select元素的width。有时在选项中你有太长的字符串，我想让它更广泛。有什么方法可以做到这一点。我的组件中的样式即使不起作用background-color也无效。有人知道为什么这么奇怪吗？

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

Answer 1

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

<强> 1。使用::ng-deep：

使用/ deep / shadow-penetcing后代组合器强制样式通过子组件树进入所有子组件观点。 / deep / combinator适用于任何深度的嵌套组件，它适用于视图子节点和内容子节点零件。使用/ deep /，＆gt;＆gt;＆gt;和:: ng-deep仅限于模拟视图封装。模拟是默认和最常用的视图封装。对于有关更多信息，请参阅控制视图封装部分。该阴影穿透后代组合子已被弃用，支持是从主要浏览器和工具中删除。因此我们打算放弃支持Angular（对于所有3个/ deep /，＆gt;＆gt;＆gt;和:: ng-deep）。直到那么:: 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中相同。

您无需使用任何值来打破封装并从组件中设置材质样式。所以可以在组件的选择器上设置：

<强> Typscript：

  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

Answer 2

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

Answer 3

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

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

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

<mat-select panelClass="matRole">...

Answer 4

您还可以查看以下网址提供的灵活解决方案答案： this solution.

确保将具有面板特定样式的css文件导入到styles.css文件中（假设这是项目中的全局css文件，您可以在“ styles”下的angular.json文件中进行检查）。只有这样，您的html才能识别出可以调整特定面板的样式。

Answer 5

角材料 11.2.6

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

其中 text-sm（截至顺风）

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

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

造型垫选择角度材料

6 个答案: