Si hallas algún fallo en tu código o trabajo, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.
Solución:
Para Angular9+, de acuerdo con esto, puedes usar:
.mat-select-panel
background: red;
....
Manifestación
Usos de materiales angulares mat-select-content como nombre de clase para el contenido de la lista de selección. Por su estilo sugeriría cuatro opciones.
1. Usa ::ng-deep:
Utilice el combinador descendiente /profundo/ perforador de sombras para forzar un estilo hacia abajo a través del árbol de componentes secundarios en todas las vistas de componentes secundarios. El combinador /deep/ funciona en cualquier profundidad de componentes anidados y se aplica tanto a los elementos secundarios de vista como a los elementos secundarios de contenido del componente. Use /deep/, >>> y ::ng-deep solo con encapsulación de vista emulada. Emulado es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Encapsulación de la vista de control. El combinador de descendientes que perfora las sombras está en desuso y se está eliminando la compatibilidad con los principales navegadores y herramientas. Como tal, planeamos eliminar el soporte en Angular (para los 3 de /deep/, >>> y ::ng-deep). Hasta entonces, debería preferirse ::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;
MANIFESTACIÓN
2. Utilice ViewEncapsulation
… los estilos CSS de los componentes se encapsulan en la vista del componente y no afectan al resto de la aplicación. Para controlar cómo ocurre esta encapsulación por componente, puede establecer el modo de encapsulación de vista en los metadatos del componente. Elija entre los siguientes modos: …. Ninguno significa que Angular no encapsula la vista. Angular agrega el CSS a los estilos globales. Las reglas de alcance, los aislamientos y las protecciones discutidas 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 de material de su componente. Entonces puede configurar en el selector del componente:
Texto mecanografiado:
import ViewEncapsulation from '@angular/core';
....
@Component(
....
encapsulation: ViewEncapsulation.None
)
CSS
.mat-select-content
width:2000px;
background-color: red;
font-size: 10px;
MANIFESTACIÓN
3. Establecer estilo de clase en style.css
Esta vez tienes que ‘forzar’ los estilos con !important también.
estilo.css
.mat-select-content
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
MANIFESTACIÓN
4. Usa estilo en línea
MANIFESTACIÓN
Pon el nombre de tu clase en el elemento mat-form-field. Esto funciona para todas las entradas.
Recuerda que puedes agregar una reseña si te fue útil.