docs(typography): explain how to restore typical specificity within mat-typography class

[captaincaius]

shows users how to use the mat-typography class to set defaults on elements,
but still be able to override the element styles via classes

[crisbeto]

I'm not sure that it's very clear what the issue is from this paragraph. What do you think about something like this?

Note that by default the mat-typography selectors have a very low specificity which may cause some of your own styling to conflict with them. You can work around it by increasing the selector's specificity.

[captaincaius]

Thanks very much for the review. So yeah, clearly it's not worded well if it's not clear what the issue is. Sorry for that. Maybe an example would help.

<section class="mat-typography">
  <h1>This header will be styled using the default h1 from the typography configuration.  Hooray!</h1>
  <h1 class="mat-subheading-1">Unfortunately .mat-subheading-1 loses and this looks the same</h1>
</section>

It would be nice to be able to use .mat-typography for sensible defaults, but allow them to be overridden by the built-in classes so you can use the right semantic tags but still be able to style them according to a standard style guide.

And the reason it doesn't work is that the rules look like this:

  .mat-h1, .mat-headline, #{$selector} h1 {
    @include mat-typography-level-to-styles($config, headline);
    margin: 0 0 16px;
  }
  .mat-h4, .mat-subheading-1, #{$selector} h4 {
    @include mat-typography-level-to-styles($config, subheading-1);
    margin: 0 0 16px;
  }

instead of this:

  .mat-h1, .mat-headline, #{$selector} h1, #{$selector} .mat-headline {
    @include mat-typography-level-to-styles($config, headline);
    margin: 0 0 16px;
  }
  .mat-h4, .mat-subheading-1, #{$selector} h4, #{$selector} .mat-subheading-1 {
    @include mat-typography-level-to-styles($config, subheading-1);
    margin: 0 0 16px;
  }

I suggested this in an issue but was told that it's by design. So I thought it would be good to let people know how they can still achieve this setup in the guide.

Sorry for the lonnng explanation!

[crisbeto]

Should use single quotes. Also since this is an example, can it use a more concise class name?

[captaincaius]

Cool beans. If you folks agree this documentation is even worthwhile I'll change it :).

[captaincaius]

closing since you opened #14617 :) thx

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}