Мой текст на английском языке огромен, и я не могу его контролировать - PullRequest
0 голосов
/ 24 октября 2019

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

В данном руководстве говорится, что я должен иметь возможность использовать что-то вроде:

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

Для управления внешним видом текста. Это не работает.

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

Текст остается очень большим независимо от того, какой класс я использую. Я могу использовать только стиль CSS, чтобы изменить текст. Чего мне не хватает в этом уроке?

1 Ответ

1 голос
/ 24 октября 2019

в вашем CSS, оберните стиль в ::ng-deep

Если это ваш HTML:

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

Ваш CSS должен быть:

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

Thisпотому что стили в angular по умолчанию ограничены только этим компонентом. Поэтому, если вы хотите получить доступ к вложенному компоненту, вы должны использовать селектор ::ng-deep

РЕДАКТИРОВАТЬ:

Stackblitz демо

...