造型垫选择角度材料

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

面板的宽度始终等于widthselect元素的宽度.有时在选项中你有太长的字符串,我想让它更广泛.有什么方法可以做到这一点.我的组件中的风格甚至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 descendant组合器将样式向下强制通过子组件树到所有子组件视图中./ deep/combinator适用于任何深度的嵌套组件,它适用于视图子节点和组件的内容子节点.仅对模拟视图封装使用/ deep /,>>>和:: ng-deep.模拟是默认和最常用的视图封装.有关更多信息,请参阅"控制视图封装"部分.不推荐使用阴影穿透后代组合器,并且正在从主要浏览器和工具中删除支持.因此,我们计划放弃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样式封装在组件的视图中,不会影响应用程序的其余部分.要控制此封装如何在每个组件的基础上发生,您可以在组件元数据中设置视图封装模式.从以下模式中选择:....无意味着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元素上。这适用于所有输入。