Estilo de entrada de campo de formulario mat en Angular/Material

Agradeceríamos tu apoyo para difundir nuestros posts sobre las ciencias informáticas.

Solución:

Para cambiar los estilos de entradas de material con scss:

Estándar:

::ng-deep .mat-form-field 
    .mat-input-element 
        color: slategray;
    
    .mat-form-field-label 
        color: slategray;
    
    .mat-form-field-underline 
        background-color: slategray;
    
    .mat-form-field-ripple 
        background-color: slategray;
    
    .mat-form-field-required-marker 
        color: slategray;
    

Enfocado: (cuando se selecciona)

::ng-deep .mat-form-field.mat-focused 
    .mat-form-field-label 
        color: #ff884d;
    
    .mat-form-field-ripple 
        background-color: #ff884d;
    
    .mat-form-field-required-marker 
        color: #ff884d;
    
    .mat-input-element 
        color: #ff884d;
    

Inválido:

::ng-deep .mat-form-field.mat-form-field-invalid 
    .mat-input-element 
        color: #ff33cc;
    
    .mat-form-field-label 
        color: #ff33cc;
        .mat-form-field-required-marker 
            color: #ff33cc;
        
    
    .mat-form-field-ripple 
        background-color: #ff33cc;
    

MANIFESTACIÓN

también puedes usar ViewEncapsulation.None para evitar ::ng-deep cual es obsoleto:

import  ViewEncapsulation  from '@angular/core';

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

Puede usar el selector css que usa a continuación:

/deep/ .mat-input-underline 
   background-color: white;

Él /deep/ combinator está programado para la obsolescencia en Angular, por lo que es mejor prescindir de él. Desafortunadamente, el .mat-input-underline de Angular Material está altamente especificado, lo que hace que sea muy difícil anularlo sin usar /deep/

La mejor manera que he encontrado es usar una ID, que le permite una mayor especificidad en comparación con los estilos de material angular predeterminados.

 

    
      Search
      
      search
    

Luego, su identificación de ‘formulario de búsqueda’ se puede usar para orientar la entrada. No puede apuntar al mat-form-field-underline en el componente.scss sin romper la encapsulación de su vista. Es más fácil hacer esto a nivel global, agregando esto a su global.scss

global.scss:

#search-form 
  .mat-form-field-underline 
    background-color: $accent;
  
  .mat-form-field-ripple 
    background-color: $accent;
  
  .placeholder 
    display: none;
  

Espero que el equipo de Angular Material retire su especificidad en el futuro, porque actualmente no hay una manera fácil de anular sus valores predeterminados.

Según tengo entendido, ambas características parecen estar en MatFormField.

1. floatPlaceholder está en desuso, porque ahora es [floatLabel] para FloatLabelType ('never', 'always', 'auto'), aplicado usando la entrada
2. Puede cambiar el color del subrayado con la entrada [color]sin embargo, solo puede seleccionar colores de su tema ('primary', 'accent', 'warn'). Para obtener más información sobre cómo configurar el tema, visite su sitio web aquí,

  
    
    search
  

valoraciones y reseñas

Si haces scroll puedes encontrar las reseñas de otros usuarios, tú igualmente tienes el poder mostrar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador