在Angular Material中对样式进行选择 [英] Styling mat-select in Angular Material

问题描述

如何为mat-select的面板组件设置样式.从文档中，我得到了需要提供panelClass的信息，所以它是这样的:

How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this:

<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时，它根本不起作用.例如，我的s​​css如下所示:

I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

面板的宽度始终等于选择元素的width.有时在选项中，您的字符串太长，我想使其宽一点.有什么办法可以做到这一点.即使background-color，我组件中的样式也无法正常工作.有人知道为什么这如此奇怪吗?

The width of the panel is always equal to the width of the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even background-color is not working. Does somebody knows why this behaves so strange?

我正在使用: 角4.4.5 @角度/材料:2.0.0-beta.12

I'm using: Angular 4.4.5 @angular/material: 2.0.0-beta.12

推荐答案

对于Angular9 +，根据

For Angular9+, according to this, you can use:

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

演示

---

Angular Material使用mat-select-content作为选择列表内容的类名.对于其样式，我将建议四个选项.

---

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

1.使用 :: ng-deep :

1. Use ::ng-deep:

使用/deep/刺穿阴影的后代组合器强制样式 向下通过子组件树进入所有子组件 意见./deep/组合器可应用于任何深度的嵌套组件， 它适用于该视图的子视图和内容子视图 成分. /deep/，>>>和:: ng-deep仅与模拟视图封装一起使用. 默认是最常用的视图封装，它是模拟".为了 有关更多信息，请参见控制视图封装"部分.这 不推荐使用穿刺后代组合器，并且支持 从主要的浏览器和工具中删除.因此，我们计划放弃 在Angular中提供支持(适用于/deep/，>>>和:: ng-deep的全部3种).直到 那么:: 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;   
}

演示

2.使用 ViewEncapsulation

2. Use ViewEncapsulation

...组件CSS样式被封装到组件的视图中，并且 不会影响应用程序的其余部分. 要控制每个组件的封装方式， 您可以在组件元数据中设置视图封装模式. 从以下模式中选择: .... None表示Angular不进行视图封装. Angular添加了 CSS为全局样式.范围规则，隔离和 前面讨论的保护措施不适用.这本质上是 就像将组件的样式粘贴到HTML中一样.

... 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 value is what you will need to break the encapsulation and set material style from your component. So can set on the component's selector:

打字稿:

  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来强制"样式.

This time you have to 'force' styles with !important too.

style.css

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

演示

4.使用内联样式

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

演示

这篇关于在Angular Material中对样式进行选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！