https://material.angular.io/guide/typography

Un tutorial aquí dice que debería poder usar algo como:

`<h1 class="mat-display-1">Jackdaws love my big sphinx of quartz.</h1>`

Para controlar cómo se ve el texto. No funciona.

`<mat-toolbar>
 <mat-toolbar-row>
  <h1 class="mat-subheading-1">Some incredibly huge text</h1>
 </mat-toolbar-row>
</mat-toolbar>`

El texto permanece muy grande sin importar la clase que use. Solo puedo usar el estilo CSS para cambiar el texto. ¿Qué me falta en este tutorial?

0
Noname135 24 oct. 2019 a las 20:57

1 respuesta

La mejor respuesta

En tu css, envuelve el estilo en ::ng-deep

Si este es tu HTML:

`<mat-toolbar>
 <mat-toolbar-row>
  <h1 class="mat-subheading-1">Some incredibly huge text</h1>
 </mat-toolbar-row>
</mat-toolbar>`

Tu CSS debería ser:

::ng-deep {
  .mat-subheading-1 {
    font-size: 16px
  }
}

Esto se debe a que los estilos en angular tienen un alcance predeterminado solo para ese componente. Entonces, si desea acceder a un componente anidado, debe usar el selector ::ng-deep

EDITAR:

demostración de Stackblitz

1
C_Ogoo 24 oct. 2019 a las 20:44