如何设计 Angular Material 垫选择面板的样式？

在 Angular Material 中设置垫子选择面板的样式

问题

使用 panelClass 自定义垫子选择组件的面板时，尽管 HTML 模板中进行了正确的类分配，CSS 样式仍无法应用。

解决方案

对于 Angular 9 及更高版本：

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

对于 Angular 2.0.0- beta.12 及更早版本中，有几个选项可以设置面板样式：

选项 1：使用 ::ng-deep

此方法利用 ::ng -deep组合器来穿透组件的视图封装：

<code class="css">::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}</code>

方案2：使用ViewEncapsulation

通过在组件元数据中将封装模式设置为None，CSS样式不再封装在组件视图中：

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>

选项 3：在 style.css 中设置类样式

将样式直接应用于 .mat-select-外部 style.css 文件中的内容类，使用 !important 强制应用：

<code class="css"> .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } </code>

选项 4：使用内联样式

直接在HTML 模板：

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

以上是如何设计 Angular Material 垫选择面板的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！