bug(mat-typography): mat-typography changes styles of material components

[epelc]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

See https://stackblitz.com/angular/lpojxbrykxj

Steps to reproduce:

1. Compare text height of title/subtitle in the first card vs the second
2. Notice they are different due to .mat-typography on the second card

Expected Behavior

What behavior were you expecting to see?

Adding .mat-typography should not override styles of material components. It is meant to allow you to get sensible defaults for the native components(h1,h2, p, etc). ie you should be able to add .mat-typography to your body element to enable material like typography styles for everything. But this should not change the styles of material components like mat-card since they should already have material typography on their elements like title/subtile.

Actual Behavior

What behavior did you actually see?

At least the title and subtitle components for material cards are changing styles when mat-typography is enabled. They should already have these styles taken into account when it is disabled and therefore should not change.

In this specific instance it looks like mat-typography sets a default line-height: 20px(fonts 14px/20) while the mat-card-title and subtitle do not have line height by default.

Environment

• Angular: latest
• CDK/Material: 9.2

[crisbeto]

I had a PR for this a while ago, but we never managed to land it in g3 for some reason. #10217

[jelbourn]

Duplicate of #10215

[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.}