0
285
Vistas¿Cómo sobrescribir estilos de material angular 2?
Tengo esta selección en material angular:
Su código:
<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount"> <md-option [value]="null" [disabled]="true"> Descuentos </md-option> <md-option *ngFor="let option of discounts" [value]="option"> {{ option }} </md-option> <md-option [value]="null" [disabled]="true"> Convenios </md-option> <md-option *ngFor="let option of agreements" [value]="option"> {{ option }} </md-option> </md-select>Y me gustaría tener estos estilos en él:
Traté de poner algunas clases sobre md-select y md-option, pero no funcionó. Me gustaría tener tal vez solo un ejemplo de cómo poner el color de fondo o el borde y eso me daría una idea.
Gracias de antemano
3 Respuestas
Responde la pregunta0
Creo que las clases deberían funcionar, pero es posible que deba usar /deep/ debido a la encapsulación de la vista.
Prueba esto:
/deep/ md-select.your-class { background-color: blue; }También puedes jugar con la tematización .
0
Las mejores soluciones de /deep/ , >>> y ::ng-deep están en desuso y ya no deben utilizarse.
El método recomendado ahora es ver encapsulación
Editar: Palabra de advertencia. No recomiendo usar este método en absoluto (a partir de enero de 2019) ya que configurar ViewEncapsulation.None hará que cualquiera de esos componentes css se convierta en estilos globales (impide que Angular cree atributos ng_xxx para css con ámbito de componente). Esto dará como resultado un conflicto de estilo global, especialmente con el módulo css con carga diferida.
Nuestra solución para ViewEncapsulation fue anular CSS muy específico usando selectores de CSS altamente específicos en 1) CSS global o 2) creando archivos de estilo separados para ciertas vistas/estilos/elementos, importando en cada componente requerido (por ejemplo styleUrls: [material-table-override.css, component.css] ).
Usé ViewEncapsulation.None para anular con éxito los estilos de la tabla de materiales dentro de un solo componente en Angular 6.
En su componente:
import { ViewEncapsulation } from '@angular/core'; // ... @Component({ // ... encapsulation: ViewEncapsulation.None, })0
Si puede resolver sus problemas de estilo con la tematización material 2 scss, esa sería la forma "correcta" de escuchar un enlace a ese sitio. https://material.angular.io/guide/theming .
Sin embargo, utilicé !important en los estilos que no quería que sobrescribieran los estilos de materiales.
Así es como lo usé:
/*hack to get rid of a scrollbar*/ .cdk-focus-trap-content{ overflow-x: hidden !important; } /*hack to get rid of a padding on the popup*/ .mat-dialog-container{ padding: 0px !important; }Tuve una situación en la que aparecía una barra de desplazamiento horizontal en md-sidenav y me deshice de su relleno predeterminado en el md-dialog.
No es la solución más elegante, pero espero que esto ayude.
Esta es otra pregunta de StackOverflow que analiza qué es !importante.