如何设置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

推荐答案

对于Angular9+,根据this,您可以使用:

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

Demo


Angular Material uses mat-select-content as class name for the select list content. For its styling I would suggest four options.

1. Use 100:

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. Use 100

...组件CSS样式被封装到组件视图中,并且 不影响应用的睡觉. 为了控制该封装如何在每个组件的基础上发生, 您可以在组件元数据中设置视图封装模式. 从以下模式中 Select : …… 无表示Angular 不进行视图封装.Angular 添加了 CSS添加到全局样式.作用域规则、隔离和 前面讨论的保护措施不适用.这本质上是 与将组件样式粘贴到HTML中相同.

无值是打破封装并设置零部件material 样式所需的值. 因此可以在组件的 Select 器上设置:

Typscript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

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

DEMO


3. Set class style in style.css

这一次你也要"强迫"!important种款式.

style.css

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

DEMO


4. Use inline style

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

DEMO

Css相关问答推荐

臭虫?嵌套的css供应商前缀中断Chrome css解析

如何使用Bootstrap将图像水平对齐,使其顶部和底部位于同一水平线上?

如果 css 仅位于 razor 页面中的一页上,我是否仍应在 wwwroot 中写入或仅将其放在页面上?

在具有特定类的 td 之后,如何编写适用于该行上所有 td 元素的表行的 CSS Select 器?

如何在不使用 !important 的情况下提高优先级?

在活动状态下更改按钮的外观

卡在 CSS 中的grid-template-columns中

在同一旋转中以度数变换旋转

CSS 中的区域类似于 C# 区域?

如何更改下拉列表的宽度?

重置子元素的不透明度 - Maple Browser (Samsung TV App)

在固定高度的输入字段中垂直对齐文本而不显示:表格或填充?

使用 Twitter Bootstrap 使页脚粘在页面底部

如何将页脚保持在屏幕底部

CSS媒体查询仅针对iPad和iPad?

字体上的 Font-Awesome 错误 404

空的 iframe src 是否有效?

CSS图像最大宽度设置为原始图像大小?

单选按钮和标签显示在同一行

如何忽略父 CSS 样式