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 时，它就不起作用了.例如，我的 scss 如下所示:

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:

使用/deep/shadow-piercing后代组合器来强制风格通过子组件树向下进入所有子组件意见./deep/组合器适用于任何深度的嵌套组件，它同时适用于视图的孩子和内容的孩子成分.仅在模拟视图封装中使用/deep/、>>> 和 ::ng-deep.Emulated 是默认的也是最常用的视图封装.为了更多信息，请参阅控制视图封装部分.这不推荐使用阴影穿透后代组合器，支持是从主要浏览器和工具中删除.因此，我们计划放弃支持 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

... 组件 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 是您打破封装并从组件中设置材料样式所需的值.所以可以在组件的选择器上设置:

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屋！