Estilizando mat-select em Angular Material

Ao personalizar a aparência do mat-select, você pode encontrar desafios ao estilizar seu componente do painel. Apesar de seguir a abordagem recomendada de usar a propriedade panelClass para especificar estilos personalizados, os estilos não são aplicados, deixando você perplexo.

Por que os estilos não funcionam

Angular Material usa mat-select -content como o nome da classe para o conteúdo da lista de seleção. Para estilizar este componente, vários métodos estão disponíveis:

1. Usando ::ng-deep

Empregue o combinador descendente ::ng-deep shadow-piercing para forçar estilos através de componentes filhos.

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

2. Usando ViewEncapsulation

Configure o encapsulamento de visualização do componente como Nenhum, permitindo que os estilos escapem do isolamento do componente.

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

3. Configurando o estilo da classe em style.css

Use o arquivo style.css para definir estilos personalizados, aplicando-os com !important para substituir quaisquer estilos existentes.

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

4. Usando estilo embutido

Aplique estilos embutidos diretamente aos elementos mat-option, substituindo quaisquer estilos herdados.