Eliana, miembro de este equipo de trabajo, nos ha hecho el favor de crear este enunciado ya que domina muy bien el tema.
Solución:
Puedes agregar esto en tu css
::ng-deep .mat-form-field-wrapper
margin-bottom: -1.25em;
NOTA: Como quitas el espacio no puedes poner
o
hint adecuadamente. El error y la pista entran en el campo de formulario.
error
Sin uso ::ng-deep
(para Angular 8)
Desactive la encapsulación de su componente dentro del cual cambia el relleno.
Puedes hacer esto por
import Component,ViewEncapsulation from '@angular/core';
@Component(
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
)
export class ExampleComponent
Envuelva el componente que desea diseñar en una clase personalizada. Así que no afectará a ningún otro mat-form-field
componentes Vamos a envolver esto con con my-form-field
clase por ahora
.my-form-field .mat-form-field-wrapper
margin-bottom: -1.25em;
Puede agregar estos css en la hoja de estilo global sin desactivar la encapsulación de vista. Pero el método más elegante es el anterior.
Prueba lo siguiente:
(Puede seguir la discusión sobre este espacio inferior adicional aquí: https://github.com/angular/components/issues/7975)
En angular 9, pude eliminar los espacios solo agregando lo siguiente en el componente.scss (las otras respuestas no funcionaron en mi caso):
:host ::ng-deep .mat-form-field-wrapper
margin: 0 !important;
padding: 0;
Además, estoy usando la apariencia = “contorno”, para otras apariencias, probablemente será necesario cambiar otras clases y propiedades de css, ya que puede tener otros elementos.
Comentarios y valoraciones
Te invitamos a secundar nuestro análisis exponiendo un comentario o dejando una valoración te damos la bienvenida.