Solución:
Este div extra es bastante molesto. Sin embargo, resulta que puedes usar la perforación de sombras para aplicarle un estilo sin cambiar el modo de emulación CSS. Puede hacer esto usando el combinador :: ng-deep como tal:
::ng-deep .mat-card-header-text {
/* CSS styles go here */
margin: 0px; // for example to remove the margin
}
En su lugar, también puede reemplazar todo el encabezado con sus propias clases de CSS:
<mat-card>
<div class="your-header">
<div class="your-title">
Your title here
</div>
</div>
<mat-card-content>
Stuff goes here
</mat-card-content>
</mat-card>
Según su recomendación reciente https://angular.io/guide/component-styles, esto funcionó para mí:
:host /deep/ .mat-card-header-text {
margin: 0;
}
Este comportamiento es el resultado de la encapsulación de vista de Angular 2/4, que en Emulated el modo solo inyectará (a través de style elementos) estilos de componentes que coinciden con elementos realmente en su plantilla de vista.
Entonces, si intentas anular un .mat-* estilo así:
.mat-card-header-text {
height: auto;
margin: 0;
}
pero su HTML se ve así:
<md-card-header>
<md-icon md-card-avatar>face</md-icon>
<md-card-title>{{user.name}}</md-card-title>
<md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
</md-card-header>
entonces el .mat-card-header-text La regla no se inyectará en el DOM, ya que el inyector no ve ese elemento en su plantilla.
La solución alternativa más sencilla es incluir directamente el div.mat-card-header-text elemento en su plantilla:
<md-card-header>
<md-icon md-card-avatar>face</md-icon>
<div class="mat-card-header-text">
<md-card-title>{{user.name}}</md-card-title>
<md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
</div>
</md-card-header>
Editar: como ha señalado, esto genera un vacío adicional div.mat-card-header-text, por lo que no es una solución ideal. La única forma de solucionarlo es si crea su propio componente de tarjeta basado en md-card (posiblemente usando la herencia del componente), pero en ese momento simplemente modificaría el CSS del componente directamente.
De lo contrario, puede cambiar el modo de encapsulación de vista de su componente a None:
import { ViewEncapsulation } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'user-card',
templateUrl: 'user-card.component.html',
styleUrls: ['user-card.component.css'],
encapsulation: ViewEncapsulation.None
})
...
Aunque si haces eso, el :host El selector ya no funcionará, por lo que deberá reemplazarlo con el selector que especificó en el @Component decorador:
user-card {
...
}