0

I am implementing my own typography theming in my angular application, I am trying to replicate the default configuration that comes with the typography components in react mui. At the moment I have already defined all the typography levels specified in the angular material theme customization guide version 15.0.1 and they are also already grouped in a typography configuration variable as specified in the documentation.

$typography-global-config: mat.define-typography-config(   $font-family: "Roboto",   /*this is a h1*/ $headline-5:
    mat.define-typography-level(
      $font-family: Nunito,
      $font-weight: 300,
      $font-size: 6rem,
      $line-height: 1.1167,
      $letter-spacing: -0.01562em,
    ),   /*healdine-6 is a h2*/ $headline-6:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 300,
      $font-size: 3.75rem,
      $line-height: 1.2,
      $letter-spacing: -0.008833em,
    ),   /*subtitle-1 is a h3*/ $subtitle-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.75,
      $letter-spacing: 0.00938em,
    ),
       /*subtitle-2 is a h4*/ $subtitle-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.57,
      $letter-spacing: 0.00714em,
    ),

  $body-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.875rem,
      $line-height: 1.5,
      $letter-spacing: 0.001071em,
    ),   $body-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.5,
      $letter-spacing: 0.00938em,
    ),   $caption:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.75rem,
      $line-height: 1.66,
      $letter-spacing: 0.03333em,
    ),    $button:  
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.75,
      $letter-spacing: 0.02857em,
    ), );

my problem occurs when I try to change the default font level of the toolbar component which is a headline-6 and I want to change it to a subtitle-2.

I call the default class that comes with this component and invoking the mat.typography-level mixin I try to configure it.

.mat-toolbar{   @include mat.typography-level($typography-global-config, 'subtitle-2'); }

when initializing the application the toolbar element still has the configuration of the headline-6 typography level which is the one used by default.

enter image description here

and it overwrites the configuration that I try to implement.

enter image description here

I would like to know how else I could change the typography level of this toolbar element, if any other mixin could work for me to make it work?

jaisemberg2000
  • 1
  • 3

1 Answers1

0

Currently, there is no such facility provided by Angular to configure your own level of Typography.

But there is a back door, which will get you to your solution.

All you need to do is to create an SCSS map containing your typography and then merge it into the default Angular typography level.

You can refer toThis solution.

Vedic Developer
  • 63
  • 1
  • 9