css - event - Styling mat-select en Material Angular

mat-select-trigger

Question

Cómo diseñar el componente del panel de mat-select. De los documentos que obtengo debo proporcionar panelClass, así que lo hago así:

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

Inspeccioné en las herramientas de desarrollador que esta clase está adjunta al panel en DOM y está adjunta. Así que tengo mi clase scss personalizada adjunta a este elemento. Ahora, cuando proporciono css simplemente no funciona. Mi scss, por ejemplo, se ve así:

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

El ancho del panel es siempre igual al width del elemento seleccionado. A veces en opciones Tienes cadenas demasiado largas y me gustaría hacerlas un poco más anchas. ¿Hay alguna manera de cómo hacer esto. Mi estilo de mi componente simplemente no funciona, incluso background-color no funciona. ¿Alguien sabe por qué esto se comporta tan extraño?

Estoy usando: Angular 4.4.5 @ angular / material: 2.0.0-beta.12

Answer 1

El material angular utiliza mat-select-content como nombre de clase para el contenido de la lista de selección. Por su estilo sugeriría cuatro opciones.

1. Use angular.io/guide/component-styles#deprecated-deep--and-ng-deep :

Use el combinador de descendientes / deep / shadow-piercing para forzar un estilo hacia abajo a través del árbol de componentes secundarios en todas las vistas de componentes secundarios. El / deep / combinator funciona con cualquier profundidad de componentes anidados, y se aplica tanto a los elementos secundarios de vista como a los elementos secundarios del componente. Use / deep /, >>> y :: ng-deep solo con encapsulación de vista emulada. Emulada es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Controlling view encapsulation. El combinador de descendientes que perfora la sombra está en desuso y el soporte se está eliminando de los principales navegadores y herramientas. Como tal, planeamos dejar el soporte en Angular (para los 3 de / deep /, >>> y :: ng-deep). Hasta entonces, se debería preferir :: ng-deep para una compatibilidad más amplia con las herramientas.

CSS:

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

DEMO

2. Utilice ViewEncapsulation

... los estilos CSS de los componentes están encapsulados en la vista del componente y no afectan al resto de la aplicación. Para controlar cómo se realiza esta encapsulación por componente, puede configurar el modo de encapsulación de la vista en los metadatos del componente. Elija entre los siguientes modos: .... Ninguno significa que Angular no muestra la encapsulación. Angular agrega el CSS a los estilos globales. Las reglas de alcance, los aislamientos y las protecciones analizadas anteriormente no se aplican. Esto es esencialmente lo mismo que pegar los estilos del componente en el HTML.

Ningún valor es lo que necesitará para romper la encapsulación y establecer el estilo del material desde su componente. Así se puede configurar en el selector del componente:

Tipografía:

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

CSS

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

DEMO

3. Establecer estilo de clase en style.css

Esta vez tienes que "forzar" los estilos con !important también.

style.css

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

DEMO

4. Usa el estilo en línea

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

DEMO

Answer 2

Ponga su nombre de clase en el elemento mat-form-field. Esto funciona para todas las entradas.