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

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

我正在使用: Angular 4.4.5@ Angular/ Material :2.0.0-beta.12

Answer 1

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

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

Demo

---

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

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

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

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

DEMO

---

<强>2。使用 ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

None 值是您需要打破封装并从您的组件设置 Material 样式的值。所以可以在组件的选择器上设置:

typescript :

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

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