docs-bug(mat-form-field): Appearance of components is altered by the documentation styling itself

[skopekreep]

Documentation Feedback

Investigating why some of my app's Angular Material components look different from those in the docs led to the observation that some of the styles from the docs pages themselves were altering the appearance of the Angular Material components embedded within. This is likely unintentional and undesirable and may lead to confusion.

Example

The default font size of the mat-form-field should be 14px, as pictured here in a fresh Aqngular install with a single Material component.

But when viewed in the context of the docs, the font size is 16px.

This was observed in both Chrome and Safari on Mac.

It looked like, at least in one case, that the <p> tag styling of the docs was being inherited by the mat-form-field. There may be a more thorough explanation, but I believe this illustrates the issue in a verifiable and reproducible way.

Additional Notes

This same issue seems to be affecting mat-input (https://material.angular.io/components/input/overview) as well, and possibly others.

Affected documentation page

https://material.angular.io/components/form-field/overview

[AdelSkiDzNew]

@skopekreep Unless I'm mistaken, I don't see any difference between the rendering and the documentation.

[skopekreep]

@AdelSkiDzNew Thanks for taking a look at this.

Your screenshot shows the component in an existing Material template, which may be having the same effect on the rendering of the font-size that I'm reporting, namely, font size values may be inherited from parent elements if not adequately declared on the component itself (which is what I suspect the issue to be).

If you are willing, could you either share the source of your template so I can reproduce exactly your screenshot or preferably create a clean install using ng new and install @angular/material only and then drop the component on the page and see if that changes the computed font size? Thanks.

[amysorto]

If I create a new app, I also see font-size: 16px.

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