46

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.

Neutrino
  • 8,496
  • 4
  • 57
  • 83

1 Answers1

60

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.

Jazzepi
  • 5,259
  • 11
  • 55
  • 81
LFLFM
  • 790
  • 7
  • 16
  • 10
    +1. This information should have been included in [Angular Material's getting started document](https://material.angular.io/guide/getting-started). – Alexei - check Codidact Jul 14 '22 at 09:22
  • 6
    If anyone wants to change this after the project already was created, simply add the class="mat-typography" to the body of the index.html. That is just the same thing as the angular cli does, at this moment at least. More in detail info can be found in the [Angular material docs](https://material.angular.io/guide/typography). – blue shell Mar 21 '23 at 13:19