In Angular Material what does setting up global typography styles mean?

Viewed 4142

When using ng add @angular/material to add Material support to an Angular project there is a prompt Set up global Angular Material typography styles?

What does this even mean? The documentation states the prompt appears, but does not describe what it actually means.

1 Answers

By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials' styles applied to it. So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class

<h1>This header doesn't have Angular Material styling</h1>
<section class="mat-typography">
<h1>This header does have Angular Material styling</h1>
</section>

If you set up global typography styles; then the first <h1> will already be styled.

Related