CODEWITHSUNDEEP
angularangular-material
Noname135
Noname135

Reputation: 101

My angular-material text is huge and I can't control it

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

A tutorial here says I should be able to use something like:

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

To control how the text looks like. It doesn't work.

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

The text stays very large no matter which class I use. I can only use CSS style to change the text. What am I missing in this tutorial?

Upvotes: 0

Views: 1557

Answers (1)

C.OG
C.OG

Reputation: 6529

in you css, wrap the style in ::ng-deep

If this is your HTML:

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

Your css should be:

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

This is because the styles in angular are scoped by default only to that component. So if you want to access a nested component, you have to use the ::ng-deep selector

EDIT:

Stackblitz demo

Upvotes: 1

Related Questions