Estilizar mat-select en Angular Material

Al personalizar la apariencia de mat-select, puede encontrar desafíos al diseñar su componente de panel. A pesar de seguir el enfoque recomendado de usar la propiedad panelClass para especificar estilos personalizados, los estilos no se aplican, lo que lo deja perplejo.

Por qué los estilos no funcionan

Angular Material usa mat-select -content como nombre de clase para el contenido de la lista de selección. Para diseñar este componente, hay varios métodos disponibles:

1. Usando ::ng-deep

Emplee el combinador descendiente ::ng-deep que perfora sombras para forzar estilos a través de componentes secundarios.

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

2. Usando ViewEncapsulation

Configure la encapsulación de vista del componente en Ninguno, permitiendo que los estilos escapen del aislamiento del componente.

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. Configuración del estilo de clase en style.css

Utilice el archivo style.css para definir estilos personalizados, aplicándolos con !important para anular cualquier estilo existente.

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

4. Usando estilo en línea

Aplica estilos en línea directamente a los elementos mat-option, anulando cualquier estilo heredado.