造型垫选择角度材料

发布时间：2020-12-17 07:53:54 所属栏目：安全来源：网络整理

导读：如何设置mat-select的面板组件的样式.从我得到的文档,我需要提供panelClass所以我这样做： mat-form-field mat-select placeholder="Search for" [(ngModel)]="searchClassVal" panelClass="my-select-panel-class" (change)="onSearchClassSelect($event)"

如何设置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元素的宽度.有时在选项中你有太长的字符串,我想让它更广泛.有什么方法可以做到这一点.我的组件中的风格即使不起作用也不起作用.有人知道为什么这么奇怪吗？

我在用着：
Angular 4.4.5
@ angular / material：2.0.0-beta.12

Angular Material使用mat-select-content作为选择列表内容的类名.对于它的造型,我建议四种选择.

1.使用::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;   
}

DEMO

2.使用ViewEncapsulation

… 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.

没有值是您需要打破封装并从组件中设置材质样式.
所以可以在组件的选择器上设置：

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中设置类样式

这次你必须’强制’样式！重要的是.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!