在Angular Material中对样式进行选择

在Angular Material中对样式进行选择

Angular Material

mat-select-content

用作选择列表内容的类名。对于其样式，我将建议四个选项。

1.使用 :: ng-deep：

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

CSS：

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

---

2.使用ViewEncapsulation

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

没有值是打破封装并从组件设置材料样式所需要的。因此可以在组件的选择器上进行设置：

打字稿：

  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

。

style.css

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

---

4.使用内联样式

<mat-option  ...>